Texto
Etiquetas, mensajes de error o indicaciones escritas junto al color.
Perceptible Distinguible Nivel A WCAG 2.0, 2.1, 2.2
1.4.1 Uso del color
Meta El color no es la única forma de distinguir la información o indicar acciones.
Qué hacer Utilizar información además del color — como formas, texto, patrones o iconos — para transmitir significado.
Por qué importa No todas las personas ven los colores o los ven de la misma manera.
Criterio de éxito oficial
1.4.1 Uso del color Nivel A
El color no se utiliza como el único medio visual para transmitir información, indicar una acción, provocar una respuesta o distinguir un elemento visual.
No desalienta el uso del color: Este criterio no prohíbe usar color. Lo que exige es que el color nunca sea la única manera de transmitir información. Combínalo siempre con otra señal visual.
¿Qué es?
El color es una herramienta poderosa para crear experiencias web atractivas y comunicar información rápidamente. WCAG 1.4.1 permite el uso del color para comunicar información, pero no permite el uso exclusivo del color. Si una diferencia de color transmite un significado, debe existir otro medio visual que comunique la misma información.
Imagina una lista de plantas clasificadas por tipo, donde la categoría se indica únicamente por el color de fondo. Para quienes no perciben el color, todos los elementos lucen idénticos — la información se pierde por completo.
❌ Solo color
Helecho espada
Echeveria elegans
Musgo de turbera
Aloe vera
Perennes Suculentas
En escala de grises, ¿cuál es cuál?
✅ Color + forma
Helecho espada
Echeveria elegans
Musgo de turbera
Aloe vera
Perennes Suculentas
Formas distinguibles sin color
La prueba de la escala de grises
Una forma rápida de comprobar si tu diseño depende exclusivamente del color es aplicar un filtro de escala de grises. Las etiquetas de texto mantienen la información legible aunque los colores sean indistinguibles:
Vista en color
Vista en escala de grises
Señales visuales alternativas
Existen múltiples formas de complementar el color para que la información sea accesible a todos:
Iconos
Símbolos como ✓, ✗ o ⚠ junto a los elementos.
Patrones
Rayados, punteados o tramas en gráficos y diagramas.
Subrayado
Ideal para distinguir enlaces dentro de bloques de texto.
Formas
Círculos, triángulos o cuadrados para diferenciar categorías.
¿Por qué importa?
El color es un recurso muy eficaz en diseño web. Sin embargo, muchas personas tienen dificultades para percibir el color:
- Las personas con visión parcial suelen tener una percepción cromática limitada.
- Muchas personas mayores no ven bien el color.
- Hasta un 8–10% de los hombres tienen algún tipo de daltonismo.
- Quienes usan pantallas monocromáticas o con colores limitados no perciben las diferencias cromáticas.
Contraste y luminosidad: Si el contenido se distingue mediante colores que difieren en luminosidad con una relación de contraste de al menos 3:1, esto se considera una distinción visual adicional válida.
¿Quién se ve afectado?
Personas con daltonismo
Hasta el 8–10% de hombres y ~0,5% de mujeres tienen algún tipo de deficiencia en la visión del color. Pueden no usar tecnología de asistencia y no ser conscientes de su limitación.
Personas con visión baja o parcial
Incluso con ampliación, las diferencias de color pueden ser difíciles de percibir sin una señal adicional de forma, texto o patrón.
Personas ciegas
Usan lectores de pantalla o pantallas braille que no transmiten colores. La información codificada solo por color necesita una alternativa textual.
Cómo implementar 1.4.1
Formularios: campos obligatorios y errores
Un borde rojo por sí solo no basta para quienes no perciben ese color. Añade siempre un mensaje de texto, un icono o ambos:
Solo color
* Campos en rojo son obligatorios
Color + texto + icono
Los campos marcados con * son obligatorios
Este campo es obligatorio
Enlaces dentro del texto
Los hipervínculos no deben diferenciarse del texto circundante solo por su color. La señal visual preferida es el subrayado:
❌ Solo color
La accesibilidad web es fundamental. Puedes consultar las directrices WCAG o leer sobre diseño inclusivo para mejorar tus proyectos.
✅ Color + subrayado
La accesibilidad web es fundamental. Puedes consultar las directrices WCAG o leer sobre diseño inclusivo para mejorar tus proyectos.
Relación de contraste para enlaces sin subrayado: Si decides no usar subrayado en los enlaces, debes proporcionar una relación de contraste de al menos 3:1 entre el color del enlace y el texto circundante, más una señal visual adicional al recibir hover o foco.
Gráficos y mapas
Cuando uses color para diferenciar datos, añade siempre un indicador adicional como patrones distintos, etiquetas de texto directamente sobre cada serie, o marcadores de forma diferentes (círculo, triángulo, cuadrado).
Ejemplos prácticos
Fallo — Gráfico de líneas con solo color
Un gráfico usa tres colores (rojo, verde, azul) para tres series de datos, sin marcadores de forma ni etiquetas directas. Una persona con daltonismo no puede distinguir las series roja y verde. La solución es añadir marcadores de forma distintos y etiquetas al final de cada línea.
Cumple — Formulario con asterisco, texto y color
Un formulario indica campos obligatorios con asterisco (*) en la etiqueta, texto «obligatorio» accesible mediante aria-required="true", y un borde rojo como señal adicional (no exclusiva). Cualquier usuario puede identificar los campos requeridos incluso sin percibir el color.
Cumple — Mapa de metro con etiquetas alfanuméricas
Un mapa de metro usa colores diferentes para cada línea. Además, cada línea tiene una etiqueta alfanumérica (L1, L2, L3...) dentro de las estaciones. Los usuarios que no distinguen los colores pueden identificar las líneas por sus etiquetas.
Técnicas recomendadas
| Código | Técnica | Situación |
|---|---|---|
| G14 | Asegurar que la información no se transmite solo mediante diferencias de color añadiendo texto o símbolos | General |
| G182 | Diferencia de contraste ≥ 3:1 con el texto adyacente además del color para distinguir enlaces | Enlaces |
| G183 | Señal visual al hacer hover/focus en enlaces que usan solo color | Enlaces |
| G111 | Usar color y patrón en gráficos para diferenciar categorías | Gráficos |
| G205 | Incluir texto o símbolo de estado visual para campos con errores | Formularios |
Errores comunes
F13 — Descripción de imagen sin información de color
Tener una descripción de texto de una imagen que no incluye la información transmitida por las diferencias de color.
F73 — Enlaces no distinguibles del texto sin hover/focus
Crear enlaces que no son distinguibles visualmente del texto no enlazado sin indicación visual al pasar el ratón o recibir foco.
F81 — Campos obligatorios solo por color
Identificar el estado de los campos de formulario requeridos usando solo diferencias visuales de color.