Uso del color en accesibilidad: lo que exige el criterio WCAG 1.4.1

Uso del color: qué dice el criterio WCAG 1.4.1

El texto del criterio es breve: el color no se utiliza como único medio visual para transmitir información, indicar una acción, solicitar una respuesta o distinguir un elemento visual. El documento «Comprender 1.4.1» del W3C resume el objetivo en una frase: el color no debe ser la única manera de distinguir una información. Qué hacer: usar, además del color, otra información, como una forma o un texto, para transmitir el significado.

El W3C ofrece ejemplos muy claros de los tres primeros casos. Información transmitida por diferencias de color: «los campos obligatorios están en rojo», «el error se muestra en rojo», «las ventas de Mary están en rojo y las de Tom en azul». Indicación de una acción: usar el color para señalar que un enlace se abrirá en una ventana nueva o que una entrada de una base de datos se ha actualizado correctamente. Solicitud de una respuesta: resaltar campos de formulario para indicar que se ha dejado vacío un campo obligatorio.

El W3C subraya que este criterio no debe desalentar en modo alguno el uso del color en una página, ni siquiera la codificación por colores, siempre que se complemente con otra indicación visual.

Por qué el color por sí solo excluye a parte de los usuarios

La intención del criterio es que todos los usuarios videntes puedan acceder a la información transmitida mediante diferencias de color. Sin embargo, algunas personas tienen dificultades para percibir los colores y otras utilizan pantallas monocromas o de colores limitados. El W3C menciona en particular:

• las personas con visión parcial, que a menudo tienen una visión de los colores limitada;
• muchos usuarios mayores, que no ven bien los colores;
• las personas con deficiencias en la visión del color, que no distinguen ciertos colores entre sí;
• quienes usan pantallas o navegadores monocromos o de colores limitados, que no pueden acceder a la información presentada solo en color.

Qué cubre el criterio y qué no

El criterio 1.4.1 trata específicamente de la percepción del color. No aborda directamente las necesidades de los usuarios de productos de apoyo: se dirige a las personas videntes que no distinguen algunos colores. Cómo se transmite la información a los productos de apoyo lo regulan otros criterios, entre ellos 1.1.1 (contenido no textual), 1.3.1 (información y relaciones) y 4.1.2 (nombre, función, valor).

Cuidado con el razonamiento inverso: una información transmitida por el color puede llegar correctamente a los productos de apoyo y aun así no cumplir el criterio, porque quien no distingue ciertos colores no utiliza necesariamente un producto de apoyo. El criterio exige una alternativa visible al color.

Tampoco se aplica cuando el color no se usa para transmitir información, indicar una acción, solicitar una respuesta o distinguir un elemento visual. Ejemplo del W3C: un enlace con el mismo estilo que el texto vecino no incumple el criterio, puesto que ninguna diferencia de color lo distingue, aunque esa falta de diferenciación puede perjudicar la usabilidad para cualquiera.

Los enlaces visitados reciben un tratamiento particular. El W3C enumera varias limitaciones técnicas: los navegadores restringen el acceso al estado visitado de los enlaces, por motivos de privacidad; solo el color puede modificarse mediante la pseudoclase CSS :visited; con el color como único recurso, la paleta no permite lograr a la vez un contraste de 3:1 entre enlaces y texto, de 3:1 entre enlaces visitados y no visitados y de 4.5:1 para todo el texto; y el autor no puede definir el estado visitado de un enlace. Conclusión del W3C: indicar el estado visitado no es responsabilidad del autor, y distinguir enlaces visitados y no visitados solo por el color no es un incumplimiento, incluso por debajo de 3:1 entre ambos colores. Los enlaces de texto deben, eso sí, respetar los contrastes mínimos con el fondo de la página (criterio 1.4.3).

Diferencia de luminosidad: cuándo basta y cuándo no

Las notas del W3C incluyen un matiz importante. Si dos colores difieren no solo en el tono sino también de forma significativa en la luminosidad, eso cuenta como una distinción visual adicional, siempre que la diferencia de luminancia relativa dé una relación de contraste de 3:1 o superior. El ejemplo: un verde claro y un rojo oscuro difieren en tono y en luminosidad, así que cumplen si la relación de contraste es de al menos 3:1. Del mismo modo, distinguir un contenido invirtiendo los colores de primer plano y de fondo de un elemento es válido, si esos colores tienen un contraste suficiente.

En cambio, si el contenido depende de la capacidad del usuario para percibir o diferenciar un color concreto, hace falta un indicador visual adicional sea cual sea el contraste. El ejemplo del W3C: saber si un contorno es verde para «válido» o rojo para «no válido». Aquí el significado está en el propio tono y el contraste no cambia nada.

Enlaces, campos con error, gráficos: fallos típicos y soluciones

El W3C recoge tres errores habituales considerados incumplimientos del criterio. Junto a cada uno indicamos las técnicas suficientes del W3C que se le aplican; el W3C las clasifica por situación (color de palabras o fondos, color dentro de una imagen) y no por fallo.

• Enlaces en un texto (fallo F73): enlaces que no son visualmente identificables sin la visión del color. Técnicas útiles: ofrecer señales visuales adicionales cuando las diferencias de color del texto transmiten información (G182), o usar una relación de contraste de al menos 3:1 para distinguir los enlaces del texto circundante (G183).
• Campos obligatorios o con error (fallo F81): identificarlos solo mediante diferencias de color. Técnica útil: añadir una señal textual a las etiquetas de campos coloreadas (G205). Otro ejemplo del W3C, con un icono como señal visual adicional: las instrucciones al inicio del formulario explican que los campos obligatorios tienen la etiqueta en rojo y un icono; quien no distingue las etiquetas rojas de las demás sigue viendo el icono.
• Gráficos (fallo F13, que también afecta a los criterios 1.1.1 y 1.3.3): un gráfico que transmite información por el color, instrucciones que solo se refieren al color y una alternativa textual que no incluye la información aportada por los colores. Técnicas útiles: combinar color y patrón (G111) y ofrecer también la información en texto (G14).
• El W3C da además el ejemplo, para una imagen, de un examen en el que los alumnos identifican los elementos de un compuesto químico en una imagen SVG gracias a los colores y a números junto a cada elemento, con una leyenda que indica el color y el número de cada tipo de elemento.

Método para revisar sus páginas

Para cada elemento con color de su interfaz, hágase la pregunta que plantea el criterio: ¿el color transmite información, indica una acción, solicita una respuesta o distingue un elemento? Si es así, busque la otra señal visible. Puntos de control prácticos:

• Enlaces en un párrafo: ¿se reconocen por algo más que su tono, mediante una señal visual adicional o un contraste de al menos 3:1 con el texto vecino?
• Formularios: ¿los campos obligatorios y los errores se señalan con texto o un icono, además del rojo?
• Gráficos y mapas: ¿cada serie se identifica con un patrón, una etiqueta o un número, y la información también figura en texto?
• Instrucciones: ¿evitan remitir solo a un color, del tipo «haga clic en el botón verde»?
• Estados (éxito, error, validación): ¿se entiende el significado sin percibir el tono?

Probar y supervisar en el tiempo

Conviene repetir estas comprobaciones cada vez que cambien sus plantillas, formularios o gráficos. Conformly ofrece una prueba gratuita de sus páginas y una supervisión continua. Para profundizar, consulte los recursos siguientes.

Preguntas frecuentes

Más sobre el tema en Conformly

• Corregir enlaces dentro de un bloque de texto en HTML
• Ficha del criterio RGAA 3.1
• Ficha del criterio RGAA 10.6

Fuentes

Este artículo se basa en las fuentes oficiales citadas al final de la página.

• W3C — Comprendre 1.4.1