WCAG 1.4.1: Uso del color

Qué significa esta regla

WCAG 1.4.1 Uso del color es un criterio de Nivel A bajo el principio de Perceptible. Establece que el color no debe utilizarse como el único medio visual para transmitir información, indicar una acción, solicitar una respuesta o distinguir un elemento visual. La palabra clave aquí es "único": el uso del color no está prohibido, pero siempre debe ir acompañado de al menos una señal visual adicional —como etiquetas de texto, patrones, formas, bordes, íconos o tratamientos tipográficos— de modo que la misma información esté disponible independientemente de que la persona usuaria pueda percibir diferencias de color.

Este criterio abarca una amplia gama de elementos de interfaz. Los campos de formulario que se vuelven rojos para indicar un error incumplen este criterio si el color rojo es el único indicador. Los gráficos y diagramas que usan solo el color para distinguir series de datos incumplen este criterio. Los enlaces estilizados únicamente con un color diferente (sin subrayado, negrita u otro diferenciador no basado en el color) incumplen este criterio cuando aparecen dentro de un bloque de texto principal. Estados de navegación, insignias de estado, indicadores de progreso, marcadores de campos obligatorios y elementos interactivos están todos dentro del alcance.

Una implementación que cumple proporciona al menos un mecanismo adicional que no dependa del color junto con el color. Por ejemplo: un campo con error delineado en rojo y acompañado de un ícono de error y una etiqueta de texto descriptiva; un gráfico circular que usa tanto colores distintos como rellenos con patrones; enlaces en el texto principal que son de un color diferente y están subrayados. Una implementación que no cumple se basa únicamente en el cambio de color: no existe ninguna diferencia de forma, borde, patrón, etiqueta o texto que transmita el mismo significado.

Hay una aclaración importante de alcance en la especificación WCAG: este criterio se aplica específicamente al color como medio visual para transmitir información. No exige que se elimine todo color, ni aborda las relaciones de contraste; eso se trata en 1.4.3 y 1.4.11. Tampoco se aplica a logotipos o imágenes decorativas donde el color no tiene un significado informativo. El criterio se refiere estrictamente a situaciones en las que una persona usuaria que no puede distinguir entre dos o más colores perdería acceso a información o funcionalidad.

Por qué es importante

Aproximadamente 300 millones de personas en todo el mundo viven con algún tipo de deficiencia en la visión del color (daltonismo), y 2.2 mil millones de personas a nivel global tienen una discapacidad visual de cerca o de lejos según la Organización Mundial de la Salud. El daltonismo afecta aproximadamente a 1 de cada 12 hombres y 1 de cada 200 mujeres de ascendencia del norte de Europa, lo que significa que en una audiencia típica de 100 personas, alrededor de 5–8 de ellas no pueden distinguir de forma fiable el rojo del verde, una de las combinaciones de color más comunes utilizadas en interfaces para señalar éxito frente a fallo.

Para personas usuarias con deuteranopia o protanopia (daltonismo rojo-verde), un formulario que resalta los campos no válidos solo en rojo es funcionalmente invisible como indicador de error. Envían el formulario, no ven ningún cambio evidente y concluyen que el sistema está roto o que su envío fue aceptado. Esto no es una molestia menor: puede dar lugar a transacciones financieras fallidas, citas médicas perdidas, solicitudes de servicios gubernamentales sin éxito o imposibilidad de completar compras en comercio electrónico.

Las personas con baja visión que dependen de pantallas de alto contraste o esquemas de color personalizados pueden tener activadas anulaciones de color a nivel del sistema. En tales entornos, los colores especificados por el autor pueden ser reemplazados por completo, haciendo que cualquier señal basada solo en el color carezca de significado independientemente de la capacidad de la persona usuaria para percibir el color. De manera similar, las personas que imprimen documentos en blanco y negro, o acceden al contenido en pantallas monocromáticas de tinta electrónica, pierden toda diferenciación de color.

Más allá de la discapacidad, este criterio beneficia a una población amplia: personas usuarias móviles al aire libre bajo luz solar intensa, personas en pantallas de baja calidad con mala reproducción del color y personas mayores cuya percepción del color disminuye de forma natural con la edad. Un uso accesible del color también mejora el SEO de forma indirecta: las etiquetas de texto descriptivas añadidas para cumplir este criterio proporcionan contenido semántico adicional que los motores de búsqueda pueden indexar. Desde el punto de vista de la usabilidad, las etiquetas de texto explícitas y las señales visuales junto con el color reducen la carga cognitiva para todas las personas usuarias al hacer que el significado de la interfaz sea redundante y reforzado.

Reglas relacionadas de Axe-core

WCAG 1.4.1 requiere pruebas manuales porque las herramientas automatizadas no pueden determinar de forma fiable si el color se está utilizando como el único medio para transmitir información. Se trata de un juicio semántico y visual: una herramienta automatizada puede detectar que dos elementos tienen colores diferentes, pero no puede determinar si esos colores son el único factor diferenciador, o si la información que transmite esa diferencia de color también se comunica mediante otro mecanismo. La herramienta necesitaría comprender la intención de diseño y el contexto completo de representación visual para hacer esa determinación.

• Se requiere prueba manual — Distinción del color de los enlaces: Axe-core no puede verificar automáticamente si los enlaces dentro del texto principal son distinguibles del texto no enlazado circundante por medios distintos al color. Una persona evaluadora debe inspeccionar visualmente la página y confirmar que los enlaces tienen una señal adicional no basada en el color (como subrayado, peso en negrita o un ícono visible) cuando aparecen en línea dentro de párrafos de texto. Las herramientas automatizadas pueden detectar que existe un enlace, pero no si su presentación visual depende únicamente de una diferencia de tono.
• Se requiere prueba manual — Estados de error en formularios: Cuando un campo de formulario entra en estado de error, las herramientas automatizadas no pueden determinar si el cambio visual (como un borde o fondo rojo) es la única indicación del error, o si va acompañado de un ícono de error, un mensaje de texto u otra señal no basada en el color. Una persona evaluadora debe interactuar con el formulario, activar errores de validación e inspeccionar cómo se comunica visualmente el error.
• Se requiere prueba manual — Visualizaciones de datos: Gráficos, diagramas, mapas y esquemas que usan el color para distinguir categorías, series de datos o regiones no pueden evaluarse automáticamente para verificar el cumplimiento de 1.4.1. Una persona evaluadora debe comprobar si también hay patrones, etiquetas o texturas presentes para diferenciar los elementos codificados por color.
• Se requiere prueba manual — Indicadores de estado: Insignias, etiquetas e indicadores de estado (como indicadores en línea/fuera de línea o etiquetas de estado de pedidos) que dependen del color para comunicar el estado no pueden marcarse automáticamente. La persona evaluadora debe confirmar que cada estado también se transmite mediante una etiqueta de texto, un ícono o un cambio de forma.

Cómo hacer las pruebas

1. Línea base de análisis automatizado: Ejecuta axe DevTools, Lighthouse o el verificador de accesibilidad Accsible en la página. Aunque estas herramientas no señalarán directamente infracciones de 1.4.1, pueden mostrar problemas relacionados como alternativas de texto faltantes, contraste insuficiente o etiquetas de formulario ausentes que se correlacionan con el uso exclusivo del color. Anota cualquier problema detectado y utilízalos como puntos de partida para la inspección manual. En axe DevTools, abre la extensión del navegador, haz clic en "Analyze" y revisa la categoría "Needs Review" además de la lista de infracciones, ya que algunos problemas relacionados con el color pueden aparecer allí.
2. Simulación en escala de grises: Utiliza una extensión del navegador o una función de accesibilidad del sistema operativo para ver la página en escala de grises (saturación cero). En macOS, ve a Configuración del sistema > Accesibilidad > Pantalla y activa "Usar escala de grises". En Windows, ve a Configuración > Facilidad de acceso > Filtros de color y selecciona "Escala de grises". Alternativamente, utiliza las DevTools del navegador: en Chrome, abre DevTools, presiona Ctrl+Shift+P (o Cmd+Shift+P en Mac), escribe "Emulate vision deficiencies" y selecciona "Achromatopsia". Revisa todos los elementos interactivos, indicadores de estado, campos de formulario, gráficos y enlaces en escala de grises y confirma que toda la información sigue siendo comprensible sin color.
3. Simulación de daltonismo: Utiliza el emulador de deficiencias visuales de Chrome DevTools (la misma ruta anterior) para simular Deuteranopia, Protanopia y Tritanopia. Para cada simulación, recorre todos los flujos de usuario: envío de formularios con errores, interpretación de datos en gráficos, navegación entre estados activos e inactivos, y verifica que no se pierda información. Herramientas como Coblis Color Blindness Simulator o Colour Oracle (una aplicación de escritorio) también pueden utilizarse para simular daltonismo en toda la pantalla.
4. Enlaces en el texto principal — comprobación manual: Identifica todos los hipervínculos que aparecen dentro de párrafos de texto principal (a diferencia de menús de navegación o listas de enlaces independientes). Para cada enlace, confirma que sea visualmente distinguible del texto no enlazado circundante mediante al menos un mecanismo que no dependa del color. El mecanismo aceptable más común es el subrayado. Si el enlace depende solo de una diferencia de color, se trata de un incumplimiento.
5. Validación de formularios — comprobación manual: Utilizando la navegación por teclado (Tab para mover el foco, Enter o Espacio para activar controles), completa un formulario y deja deliberadamente campos obligatorios vacíos o introduce datos no válidos. Envía el formulario. Inspecciona visualmente cómo se comunican los errores. Confirma que la indicación de error no se proporciona solo mediante el color: cada error debe tener una descripción de texto visible, un ícono o ambos además de cualquier cambio de color.
6. Verificación con lector de pantalla (NVDA + Firefox): Abre la página en Firefox con NVDA en ejecución. Navega por todos los campos de formulario, gráficos e indicadores de estado utilizando el cursor virtual. Confirma que el lector de pantalla anuncie los mensajes de error, las etiquetas de estado y las descripciones de datos. Esto valida la capa programática, aunque el acceso mediante lector de pantalla por sí solo no satisface el requisito visual de 1.4.1 para personas videntes con daltonismo.
7. Revisión de gráficos y diagramas: Para cada visualización de datos, intenta interpretar los datos utilizando solo la forma, el patrón o las etiquetas de texto, ignorando deliberadamente el color. Si la visualización se vuelve ininterpretable sin color, no cumple. Confirma que haya disponible una alternativa basada en texto (tabla de datos, leyenda con patrones, etiquetas de datos directas).

Cómo corregir

Enlace en línea en texto principal — Incorrecto

<!-- Link is distinguishable from surrounding text only by color.
     A user with color blindness cannot identify it as a link. -->
<p>
  Please review our
  <a href='/privacy' style='color: #0057b8; text-decoration: none;'>privacy policy</a>
  before continuing.
</p>

Enlace en línea en texto principal — Correcto

<!-- Link is underlined in addition to being a different color.
     The underline provides a non-color visual cue that identifies it as a link. -->
<p>
  Please review our
  <a href='/privacy' style='color: #0057b8; text-decoration: underline;'>privacy policy</a>
  before continuing.
</p>

Estado de error en formulario — Incorrecto

<!-- Error is communicated only by a red border.
     A color-blind user cannot distinguish this from a normal field. -->
<label for='email'>Email address</label>
<input
  type='email'
  id='email'
  name='email'
  class='input-error'
  aria-label='Email address'
/>
<!-- .input-error { border: 2px solid #cc0000; } -->

Estado de error en formulario — Correcto

<!-- Error is communicated by a red border AND a visible error icon AND a text message.
     The text message is also linked via aria-describedby for assistive technology. -->
<label for='email'>Email address</label>
<input
  type='email'
  id='email'
  name='email'
  class='input-error'
  aria-describedby='email-error'
  aria-invalid='true'
/>
<p id='email-error' class='error-message'>
  <svg aria-hidden='true' focusable='false' class='error-icon'>
    <!-- error icon SVG path data -->
  </svg>
  Please enter a valid email address.
</p>

Leyenda de gráfico basada solo en color — Incorrecto

<!-- Bar chart where categories are differentiated by fill color alone.
     Users with color blindness cannot distinguish the categories. -->
<svg role='img' aria-label='Quarterly sales by region'>
  <rect x='10' y='50' width='40' height='100' fill='#e63946' />
  <rect x='60' y='20' width='40' height='130' fill='#2a9d8f' />
  <rect x='110' y='70' width='40' height='80' fill='#e9c46a' />
</svg>
<ul class='chart-legend'>
  <li><span class='swatch red'></span> North</li>
  <li><span class='swatch green'></span> South</li>
  <li><span class='swatch yellow'></span> West</li>
</ul>

Leyenda de gráfico basada solo en color — Correcto

<!-- Bars use both distinct colors AND distinct pattern fills (via SVG patterns).
     Legend items include a text label. An accessible data table is also provided. -->
<svg role='img' aria-label='Quarterly sales by region — data table below'>
  <defs>
    <pattern id='pattern-north' patternUnits='userSpaceOnUse' width='6' height='6'>
      <line x1='0' y1='6' x2='6' y2='0' stroke='#e63946' stroke-width='1.5'/>
    </pattern>
    <pattern id='pattern-south' patternUnits='userSpaceOnUse' width='6' height='6'>
      <circle cx='3' cy='3' r='2' fill='#2a9d8f'/>
    </pattern>
    <pattern id='pattern-west' patternUnits='userSpaceOnUse' width='6' height='6'>
      <rect x='0' y='0' width='3' height='3' fill='#e9c46a'/>
    </pattern>
  </defs>
  <rect x='10' y='50' width='40' height='100' fill='url(#pattern-north)' />
  <rect x='60' y='20' width='40' height='130' fill='url(#pattern-south)' />
  <rect x='110' y='70' width='40' height='80' fill='url(#pattern-west)' />
</svg>
<ul class='chart-legend'>
  <li><span class='swatch swatch-north' aria-hidden='true'></span> North (diagonal lines)</li>
  <li><span class='swatch swatch-south' aria-hidden='true'></span> South (dots)</li>
  <li><span class='swatch swatch-west' aria-hidden='true'></span> West (squares)</li>
</ul>
<table>
  <caption>Quarterly sales by region (data table)</caption>
  <thead><tr><th>Region</th><th>Sales (units)</th></tr></thead>
  <tbody>
    <tr><td>North</td><td>100</td></tr>
    <tr><td>South</td><td>130</td></tr>
    <tr><td>West</td><td>80</td></tr>
  </tbody>
</table>

Insignia de estado — Incorrecto

<!-- Order status communicated only by background color.
     "Pending" (yellow), "Shipped" (blue), and "Delivered" (green) are
     visually identical to many color-blind users. -->
<span class='badge badge-pending'></span>
<span class='badge badge-shipped'></span>
<span class='badge badge-delivered'></span>

Insignia de estado — Correcto

<!-- Status is communicated by color AND a visible text label.
     The text label is the primary conveyor of meaning. -->
<span class='badge badge-pending'>Pending</span>
<span class='badge badge-shipped'>Shipped</span>
<span class='badge badge-delivered'>Delivered</span>

Errores comunes

• Eliminar los subrayados de los enlaces en línea y depender únicamente del color: Establecer text-decoration: none en elementos de anclaje dentro de párrafos de texto principal es uno de los incumplimientos más comunes de 1.4.1. El subrayado es la señal no basada en el color predeterminada para los enlaces; eliminarlo sin añadir otro diferenciador no basado en el color (como negrita o un ícono) provoca un incumplimiento inmediato siempre que ese enlace aparezca dentro de texto circundante de un color diferente.
• Usar pares de colores rojo/verde para estados de aprobado/rechazado sin íconos o texto adicionales: El rojo para fallo y el verde para éxito es culturalmente intuitivo pero inaccesible para personas con deuteranopia o protanopia, que son precisamente las formas más comunes de daltonismo. Siempre combina estos colores con íconos distintos (una marca de verificación frente a una X) y etiquetas de texto explícitas ("Válido" frente a "Error").
• Marcar campos de formulario obligatorios solo con un asterisco de color: Un asterisco rojo (*) junto a la etiqueta de un campo comunica el estado de obligatorio a través del color si el propio asterisco no tiene una leyenda o explicación de texto visible que lo acompañe. La solución es incluir una nota visible como "* indica campo obligatorio" cerca del formulario, asegurando que el propio asterisco tenga un significado más allá de su color.
• Usar solo el color para estados activos/seleccionados en menús de navegación: Resaltar el elemento de navegación actualmente activo solo cambiando su color de texto o de fondo, sin cambiar también el peso de la fuente, añadir un subrayado o un borde indicador, implica que las personas con daltonismo no pueden identificar en qué página se encuentran.
• Tooltips de gráficos que repiten la señal de color sin añadir etiquetas: Algunas bibliotecas de gráficos muestran tooltips que presentan una muestra de color que coincide con la serie de datos pero sin etiqueta de texto para el nombre de la serie. Si el tooltip es el único lugar donde se desambiguan los datos y se basa únicamente en una muestra de color, se trata de un incumplimiento.
• Pasos de progreso que cambian solo de color para indicar finalización: Los asistentes de formularios de varios pasos suelen estilizar los pasos completados con un fondo verde y los pasos próximos con un fondo gris. Si no se acompaña el cambio de color con texto ("Completado", "Actual", "Próximo") o un ícono (marca de verificación), el estado del paso se comunica solo mediante el color.
• Depender del color del texto del placeholder para indicar la validación de entrada: Cambiar el color del texto del placeholder (por ejemplo, ponerlo en rojo en caso de error) es tanto una señal basada solo en el color como inaccesible por razones adicionales (el texto del placeholder no sustituye a las etiquetas ni a los mensajes de error). El estado de validación debe comunicarse mediante un elemento de mensaje de error persistente y visible.
• Suponer que las etiquetas ARIA por sí solas satisfacen 1.4.1: Añadir aria-label o aria-describedby a un elemento hace que la información esté disponible para las personas usuarias de lectores de pantalla, pero 1.4.1 es un criterio visual. Requiere una señal visual no basada en el color para personas videntes con daltonismo, no solo una alternativa de texto programática. Ambas son necesarias, pero ARIA por sí sola no cumple 1.4.1.
• Diferenciar filas o celdas de tabla usando solo colores de fondo alternos: Aunque los colores alternos de filas (zebra striping) suelen ser decorativos y no un problema de 1.4.1 por sí mismos, cualquier tabla que use solo el color de fondo para agrupar, categorizar o resaltar filas o celdas específicas como informativamente distintas debe proporcionar una etiqueta textual, un ícono o un encabezado que transmita ese mismo agrupamiento o distinción.
• Tratar las señales basadas solo en el color como exentas porque son "solo decorativas": A veces las personas desarrolladoras argumentan que un punto de estado coloreado o una etiqueta de categoría coloreada es decorativa en lugar de informativa. Si eliminar el color (o ver en escala de grises) haría que una persona usuaria pierda acceso a cualquier información que necesite para entender o usar la interfaz, entonces es informativa por definición y debe cumplir con 1.4.1.

Relación con las regulaciones de accesibilidad de Turquía

La Circular Presidencial 2025/10 de Turquía, publicada en el Boletín Oficial n.º 32933 el 21 de junio de 2025, establece requisitos obligatorios de accesibilidad web y móvil alineados con WCAG 2.2. WCAG 1.4.1 Uso del color es un criterio de Nivel A, lo que significa que se incluye dentro del nivel base obligatorio de cumplimiento según esta circular.

La circular exige conformidad con WCAG 2.2 Nivel A en un plazo de un año para las instituciones públicas y de dos años para las entidades del sector privado. Las siguientes categorías de organizaciones están explícitamente cubiertas: instituciones públicas y organismos gubernamentales, plataformas de comercio electrónico, bancos e instituciones financieras, hospitales y proveedores de atención sanitaria, operadores de telecomunicaciones con 200,000 o más abonados, agencias de viajes autorizadas, empresas de transporte privado y escuelas privadas autorizadas por el Ministerio de Educación Nacional (MoNE).

Para estas entidades, no cumplir con WCAG 1.4.1 constituye una infracción normativa. En términos prácticos, una institución pública turca cuyo portal web use solo el color para indicar errores en formularios, o un banco cuya banca en línea use indicadores de estado basados solo en el color para los estados de transacción, estaría incumpliendo los requisitos de la circular. Las plataformas de comercio electrónico —un sector grande y de rápido crecimiento en Turquía— suelen usar indicadores de disponibilidad de productos codificados por color, insignias promocionales y mensajes de error del carrito, todos los cuales deben proporcionar alternativas no basadas en el color según los requisitos de la circular.

El cumplimiento de 1.4.1 es particularmente impactante en el contexto turco dado el importante número de personas usuarias que acceden a servicios gubernamentales, banca y comercio electrónico en dispositivos móviles, donde la calidad de la pantalla y las condiciones de iluminación ambiental reducen aún más la fiabilidad del color como único portador de información. Se recomienda que las organizaciones cubiertas por la circular auditen todo uso del color como mecanismo de información en sus propiedades digitales, prioricen la incorporación de etiquetas de texto y señales iconográficas junto con estados codificados por color e incluyan 1.4.1 tanto en los flujos de análisis automatizado de accesibilidad como en protocolos estructurados de pruebas manuales como parte de su programa de cumplimiento.