Lección 4 de 10 · 10 min de lectura · Revisado el 26/10/2026
Contraste de componentes y gráficos (1.4.11) y uso del color (1.4.1)
El contraste no es solo cosa del texto. Un borde de campo de formulario casi invisible, un icono gris sobre gris, una casilla de verificación que no se distingue del fondo o un gráfico con tres tonos de azul son barreras tan reales como un párrafo ilegible. Y hay otra barrera relacionada: usar el color como único medio de comunicar algo («los campos en rojo son obligatorios»). Esta lección trata los dos criterios que lo regulan: 1.4.11 Contraste no textual y 1.4.1 Uso del color.
1.4.11 Contraste no textual
Este criterio, de nivel AA e introducido en WCAG 2.1, exige un ratio de contraste de al menos 3:1 respecto a los colores adyacentes en dos tipos de elementos:
Componentes de interfaz
La información visual necesaria para identificar el componente y sus estados. En la práctica:
- El borde o relleno que indica dónde está un campo de texto, una casilla, un botón de opción o un botón. Si el campo solo se identifica por un borde gris #CCCCCC sobre blanco (ratio 1,6:1), no cumple.
- El indicador de foco (lo veremos en detalle en el curso de interfaces): el anillo de foco debe contrastar 3:1 con lo que lo rodea.
- Los estados: marcado/no marcado, seleccionado, activo, expandido. El color que indica «esta pestaña está activa» necesita 3:1 contra las pestañas inactivas, o un indicador adicional (subrayado, negrita, icono).
- Excepción: componentes cuya apariencia determina el navegador y no se ha modificado, y componentes inactivos.
Objetos gráficos
Las partes de un gráfico necesarias para entender el contenido: las líneas de un gráfico de líneas, los sectores de un gráfico circular (entre sí y con el fondo), las barras, los iconos informativos. No afecta a elementos decorativos ni a casos en que una presentación concreta sea esencial (una fotografía, un mapa de calor cuyos colores son el dato).
/* Incorrecto: borde de campo con ratio 1,6:1 sobre blanco */
input { border: 1px solid #CCCCCC; }
/* Correcto: ratio 4,5:1 */
input { border: 1px solid #767676; }
/* Icono informativo: 3:1 mínimo contra su fondo */
.icono-aviso { color: #B35900; } /* sobre blanco: 4,8:1 */Ejemplo
Un formulario de alta de una compañía eléctrica tiene campos sin borde, solo con un fondo gris muy claro (#F5F5F5) sobre página blanca. Una persona con baja visión no sabe dónde empieza ni termina el campo, ni cuántos hay. La solución es un borde de al menos 1 px con contraste 3:1 (por ejemplo, #767676) o un fondo con ese contraste. Es un cambio de una línea de CSS que afecta a miles de personas.
1.4.1 Uso del color
El criterio 1.4.1 Uso del color, de nivel A, establece que 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. Afecta a cerca del 8 % de los hombres y al 0,5 % de las mujeres con alguna forma de daltonismo, a personas con baja visión que ven en escala de grises o con alto contraste forzado, y a cualquiera que imprima en blanco y negro.
Casos típicos de incumplimiento y su solución:
| Situación | Problema | Solución |
|---|---|---|
| Campos obligatorios marcados solo en rojo | Quien no distingue el rojo no sabe cuáles son | Añadir un asterisco con leyenda o el texto «(obligatorio)» |
| Mensaje de error: el borde del campo se pone rojo | No se percibe el error | Icono y texto de error junto al campo |
| Enlaces que solo se distinguen por el color dentro de un párrafo | No se sabe dónde hay enlace | Subrayado, o color con ratio 3:1 respecto al texto circundante más un indicador adicional en hover y foco |
| Gráfico con series diferenciadas solo por color | Series indistinguibles | Etiquetas directas sobre las series, tramas o formas de marcador distintas, leyenda con texto |
| Semáforo de estado (verde/ámbar/rojo) sin texto | Estado ilegible | Icono distinto por estado y texto («Correcto», «Pendiente», «Error») |
| Calendario con días disponibles en verde y ocupados en gris | No se distingue | Tachado o icono en los ocupados, texto en el tooltip y en el nombre accesible |
El caso especial de los enlaces en el texto
Si un enlace dentro de un párrafo se distingue del texto solo por el color, la técnica aceptada (G183) exige un ratio de contraste de al menos 3:1 entre el color del enlace y el del texto circundante, además de un indicador visual adicional (subrayado, por ejemplo) al pasar el ratón y al recibir el foco. En la práctica, lo más robusto es subrayar los enlaces del contenido. En menús de navegación, donde el contexto deja claro que todo son enlaces, el subrayado no es necesario.
Error frecuente
Elegir paletas «accesibles» para gráficos solo en función del daltonismo, pero seguir dependiendo del color: una paleta segura para daltónicos no ayuda a quien ve en escala de grises o usa alto contraste. Lo que cumple 1.4.1 es que la información esté también en forma de texto, forma, trama o posición.
Cómo comprobarlo
- Escala de grises: en las herramientas de desarrollo de Chrome (Rendering > Emulate vision deficiencies) o con el filtro de color del sistema operativo. Si en gris pierdes información, incumples 1.4.1.
- Simuladores de daltonismo: el mismo panel de Chrome simula protanopia, deuteranopia, tritanopia y acromatopsia. Plugins de Figma (Stark, Color Blind) hacen lo mismo en diseño.
- Cuentagotas: Colour Contrast Analyser para medir bordes, iconos y segmentos de gráficos contra el fondo. Las herramientas automáticas no suelen evaluar 1.4.11 de forma fiable.
- Impresión en blanco y negro del diseño: una prueba muy simple y muy reveladora.
Pruébalo tú
Abre un formulario web que uses a menudo (una cita previa o un alta en una tienda online). En las herramientas de desarrollo de Chrome, abre «Rendering» y, en «Emulate vision deficiencies», elige «Achromatopsia». Rellena el formulario dejando un campo obligatorio vacío y envíalo. ¿Sigues sabiendo qué campos son obligatorios, dónde está el error y dónde termina cada campo? Si la respuesta es no, has encontrado un incumplimiento de 1.4.1 o de 1.4.11.
Punto clave
Todo lo que sirve para identificar un componente, su estado o la información de un gráfico necesita 3:1 de contraste (1.4.11). Y ninguna información puede depender solo del color: añade texto, forma, trama o subrayado (1.4.1).
Resumen
- 1.4.11 Contraste no textual (AA): 3:1 para bordes, indicadores de foco, estados de componentes y partes informativas de gráficos.
- Exentos: componentes con apariencia por defecto del navegador, inactivos y gráficos cuya presentación es esencial.
- 1.4.1 Uso del color (A): el color nunca es el único medio; añade texto, icono, forma, trama o subrayado.
- Enlaces en texto corrido: subrayado, o 3:1 respecto al texto más un indicador en hover y foco.
- Comprueba en escala de grises, con simuladores de daltonismo y con cuentagotas.
Comprueba lo que has aprendido
Esta lección se puede leer libremente. Para hacer su test de 3 preguntas, los ejercicios prácticos con páginas reales, guardar tu avance y optar al examen y al certificado, matricúlate en el curso.