Fallo común Fallos comunes WCAG 2.2
F81Fallo del criterio de conformidad 1.4.1 debido a identificar los campos obligatorios o con error únicamente mediante diferencias de color
En resumen
Este fallo se produce en formularios que señalan los campos obligatorios o los campos con error solo con un cambio de color (por ejemplo, la etiqueta en rojo), sin ningún otro indicador como un asterisco, un texto, un icono o la negrita. Las personas con deficiencias en la percepción del color o con baja visión no pueden distinguir qué campo deben rellenar o corregir. Añada siempre una pista que no dependa del color, visible y, a ser posible, también en el texto de la etiqueta.
Ejemplo práctico
Este fallo aparece a diario en formularios de cita previa, contacto o compra: los campos obligatorios se distinguen solo porque su etiqueta está en rojo y los campos con error solo porque su borde cambia de color.
Así no: Obligatorio y error indicados solo con rojo
Las etiquetas obligatorias usan #b00020 y el resto #0B2239: el tono cambia, pero entre ambos colores solo hay un contraste de unos 2,2:1, insuficiente para distinguirlos en escala de grises o con dificultades para percibir el color. El campo «Teléfono» con error solo lleva un borde rojo, sin ningún texto que lo explique.
<style>
label { display: block; margin-top: 8px; color: #0B2239; }
.oblig { color: #b00020; }
.error { border: 2px solid #b00020; }
</style>
<form action="#">
<p>Los campos en rojo son obligatorios.</p>
<label for="nom" class="oblig">Nombre y apellidos</label>
<input id="nom" type="text" autocomplete="name">
<label for="tel" class="oblig">Teléfono</label>
<input id="tel" type="tel" class="error" autocomplete="tel" value="9681">
<label for="com">Comentarios</label>
<textarea id="com" rows="2"></textarea>
<p><button type="submit">Pedir cita</button></p>
</form>
La demostración contiene, a propósito, el error de accesibilidad que se explica.
Así sí: Texto además del color
Se mantiene el rojo, pero cada etiqueta obligatoria incluye el texto «(obligatorio)» y el atributo required, y el campo con error muestra un mensaje que empieza por «Error:», asociado con aria-describedby y marcado con aria-invalid="true". La información ya no depende solo del color.
<style>
label { display: block; margin-top: 8px; color: #0B2239; }
.oblig { color: #b00020; }
.error { border: 2px solid #b00020; }
.msg-error { color: #b00020; font-weight: bold; margin: 4px 0 0; }
</style>
<form action="#">
<p>Los campos marcados con «(obligatorio)» deben rellenarse.</p>
<label for="nom" class="oblig">Nombre y apellidos (obligatorio)</label>
<input id="nom" type="text" autocomplete="name" required>
<label for="tel" class="oblig">Teléfono (obligatorio)</label>
<input id="tel" type="tel" class="error" autocomplete="tel" value="9681"
required aria-invalid="true" aria-describedby="tel-error">
<p id="tel-error" class="msg-error">Error: introduzca un teléfono de 9 cifras.</p>
<label for="com">Comentarios</label>
<textarea id="com" rows="2"></textarea>
<p><button type="submit">Pedir cita</button></p>
</form>Pruébelo aquí:
Cómo comprobarlo
Errores frecuentes en auditorías
- Leyenda «Los campos en rojo son obligatorios» o asterisco del mismo color que el texto sin explicar qué significa.
- Campos con error marcados solo con borde o fondo rojo tras enviar el formulario, sin mensaje de texto.
- Asterisco presente pero oculto a los lectores de pantalla con aria-hidden y sin required ni aria-required en el campo.
- Validación en línea que solo cambia el borde de rojo a verde para indicar si el valor es correcto.
Técnica completa: traducción al español del texto del W3C
Aplicabilidad
Todas las tecnologías
Descripción
El objetivo de esta técnica es describir el fallo que se produce cuando un campo obligatorio o un campo con error se marca únicamente mediante diferencias de color, sin una forma alternativa de identificar el campo obligatorio o el campo con error. Esto puede causar problemas a las personas con deficiencias en la percepción del color o con baja visión, porque pueden no ser capaces de percibir las diferencias de color que indican qué campo es obligatorio o qué campo está provocando un error.
Ejemplos
- Un usuario está rellenando un formulario en línea y el campo del número de teléfono es obligatorio. Para indicar que el campo del número de teléfono es obligatorio, la etiqueta «Número de teléfono» se muestra en un color distinto del que se usa para los campos opcionales, sin ninguna otra indicación de que «Número de teléfono» es un campo obligatorio. Una persona con deficiencias en la percepción del color o con baja visión puede no ser capaz de identificar que «Número de teléfono» es un campo obligatorio.
- Un usuario envía un formulario en línea y deja en blanco un campo obligatorio, lo que provoca un error. El campo de formulario que ha provocado el error se indica únicamente con texto en rojo, sin ninguna indicación adicional no basada en el color de que ese campo ha provocado un error.
En ambos ejemplos, el color podría usarse sin incurrir en fallo si el texto fuese lo bastante distinto en su presentación visual (p. ej., en negrita o con otra tipografía) como para diferenciarse fácilmente del texto circundante aunque se eliminase el color. Tampoco fallaría si el color elegido tuviese una diferencia de luminosidad (claridad) suficiente respecto al resto del texto para que se viese fácilmente como distinto al visualizarlo en blanco y negro. Se considera suficiente una relación de contraste mínima de 3:1. En estos casos, la información no se mostraría únicamente mediante el color (tono), sino también mediante la «presentación» o la «luminosidad», respectivamente. Sin embargo, aunque esto satisface el requisito visual del criterio 1.4.1, el ejemplo todavía puede fallar otros requisitos, como los de los criterios 1.3.1, 3.3.1 y 4.1.2.
Pruebas
Procedimiento
Para todos los campos obligatorios o campos con error de la página web que se identifican mediante diferencias de color:
- Comprobar que se proporciona una forma no basada en el color de identificar el campo obligatorio o el campo con error.
Resultados esperados
- Si la comprobación n.º 1 es falsa, se da esta condición de fallo y el contenido falla el criterio de conformidad.
Cómo lo comprobamos en ADDAW
Este fallo es uno de los que buscamos en cada auditoría de accesibilidad de ADDAW: lo documentamos con capturas y el código afectado, indicamos el criterio que incumple y la técnica suficiente con la que se corrige. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica F81 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
