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.
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
En escala de grises, ¿cuál es cuál?
✅ Color + forma
Formas distinguibles sin color
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
Existen múltiples formas de complementar el color para que la información sea accesible a todos:
Etiquetas, mensajes de error o indicaciones escritas junto al color.
Símbolos como ✓, ✗ o ⚠ junto a los elementos.
Rayados, punteados o tramas en gráficos y diagramas.
Ideal para distinguir enlaces dentro de bloques de texto.
Círculos, triángulos o cuadrados para diferenciar categorías.
El color es un recurso muy eficaz en diseño web. Sin embargo, muchas personas tienen dificultades para percibir el color:
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.
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.
Usan lectores de pantalla o pantallas braille que no transmiten colores. La información codificada solo por color necesita una alternativa textual.
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
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.
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).
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.
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.
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.
| 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 |
Tener una descripción de texto de una imagen que no incluye la información transmitida por las diferencias de color.
Crear enlaces que no son distinguibles visualmente del texto no enlazado sin indicación visual al pasar el ratón o recibir foco.
Identificar el estado de los campos de formulario requeridos usando solo diferencias visuales de color.