1.4.11 Contraste no textual
Criterio de éxito oficial
La presentación visual de los siguientes elementos tiene una relación de contraste de al menos 3:1 con los colores adyacentes: componentes de la interfaz de usuario (información visual necesaria para identificar los componentes y estados, excepto componentes inactivos o cuando la apariencia la determina el agente de usuario); objetos gráficos (partes de gráficos necesarias para comprender el contenido, excepto cuando una presentación concreta sea esencial).
¿Qué es?
Este criterio garantiza que los componentes de la interfaz de usuario (botones, campos, casillas, indicadores de foco) y los gráficos significativos (iconos, líneas de gráficos, diagramas) sean distinguibles por personas con baja visión, con un contraste mínimo de 3:1 con los colores adyacentes.
Contraste en componentes de interfaz: ¿pasa o no pasa?
Dos ámbitos de aplicación
Componentes de interfaz
Bordes de campos, botones, casillas, toggles, indicadores de foco, flechas desplegables y otros controles interactivos.
Incluye la información visual para identificar el control y su estado actual (seleccionado, enfocado, marcado).
≥ 3:1 con colores adyacentesObjetos gráficos
Iconos informativos, líneas de gráficos, porciones de gráficos circulares, formas significativas en diagramas.
Solo las partes necesarias para la comprensión deben cumplir el contraste.
≥ 3:1 con colores adyacentes¿Qué son los «colores adyacentes»?
Para los componentes de interfaz, son los colores que rodean al componente. Si un campo de texto tiene un borde gris y un fondo externo blanco, el contraste se mide entre el borde y el fondo externo:
Borde: #767676
Contraste: 4.6:1 ✓
¿Por qué importa?
Un contraste adecuado ayuda a las personas con daltonismo, baja visión o discapacidad visual a percibir y distinguir el contenido no textual. Los controles de bajo contraste pueden pasar completamente desapercibidos, impidiendo la interacción con el sitio web.
Imaginemos intentar rellenar un formulario sin poder identificar dónde están los campos, o consultar un gráfico donde las secciones se confunden entre sí.
Ejemplo: valoración con estrellas
Un caso habitual que falla: estrellas llenas en amarillo muy claro y estrellas vacías en blanco — casi indistinguibles para daltonismo deuteranopia:
✗ Contraste insuficiente
Ratio llena/vacía: 1.2:1
✓ Contraste adecuado
Fondo estrella vacía / fondo: >3:1
¿Quién se ve afectado?
Baja visión
Necesitan contraste adecuado para distinguir bordes de campos, iconos y elementos interactivos de su fondo.
Daltonismo
Los elementos de bajo contraste pueden pasar completamente desapercibidos con dificultad para distinguir ciertos colores.
Condiciones de luz
El bajo contraste causa fatiga visual en condiciones desfavorables: luz solar, pantallas con bajo brillo.
Cómo implementarlo
Indicador de foco visible con contraste suficiente
El indicador de foco predeterminado del navegador suele ser difícil de ver. El indicador de foco debe tener suficiente contraste contra el fondo adyacente:
/* ✓ Foco sobre fondo claro: usar --aw-focus-ring (#003D6B) — ratio 9.4:1 */
:focus-visible {
outline: 3px solid var(--aw-focus-ring);
outline-offset: 3px;
}
/* ✓ Foco sobre fondo oscuro (hero, footer, botones): usar --aw-focus-ring-light (#FFD700) */
.hero :focus-visible,
.footer :focus-visible,
.btn-primary:focus-visible {
outline-color: var(--aw-focus-ring-light);
}Bordes de campos de formulario
/* ✓ Borde visible contra fondo blanco */
.form-input {
border: 2px solid #767676; /* ratio 4.6:1 sobre #fff ✓ */
}
/* ✗ Borde casi invisible */
.form-input {
border: 1px solid #e0e0e0; /* ratio 1.2:1 sobre #fff ✗ */
}Iconos informativos
Un icono informativo (que no tiene texto alternativo adyacente) debe tener contraste de al menos 3:1 con su fondo:
/* ✓ Icono sobre fondo blanco */
.icon-info {
color: #005A9C; /* ratio 4.7:1 sobre #fff ✓ */
}
/* ✓ Icono en zona oscura */
.hero .icon {
color: #FFD700; /* ratio 4.7:1 sobre #005A9C ✓ */
}Ejemplos prácticos
Cumple — Botón con borde visible
Un botón sin relleno tiene un borde de 2px en #1565c0 sobre fondo blanco. El contraste del borde con el fondo es 5,9:1 ✓
Cumple — Checkbox con borde oscuro
Una casilla no marcada tiene un borde #333333 sobre blanco (12,6:1). Al marcarla, tick blanco sobre azul oscuro (4,8:1). Ambos estados cumplen ✓
Falla — Borde de input casi invisible
Un campo de formulario con borde #e0e0e0 sobre fondo blanco tiene contraste de 1,2:1. El usuario con baja visión no puede identificar dónde está el campo ✗
Excepción — Botón deshabilitado
Un botón deshabilitado tiene texto gris claro sobre fondo gris (1,5:1). Al ser un componente inactivo (disabled), está exento del criterio ✓
Técnicas WCAG
| Código | Tipo | Descripción |
|---|---|---|
G195 | Suficiente | Usar un indicador de foco visible provisto por el autor y con suficiente contraste |
G207 | Suficiente | Asegurar un contraste de color de 3:1 para iconos |
G209 | Suficiente | Proporcionar contraste suficiente en los bordes o límites de los componentes activos de la interfaz |
Errores frecuentes
Los errores más habituales incluyen: usar bordes de campos de texto casi iguales al fondo (ratio inferior a 3:1); indicadores de foco demasiado sutiles (borde de 1px del mismo color que el componente); iconos informativos en gris claro sobre fondo blanco; gráficos de barras o líneas con colores de baja luminancia; toggles con estados encendido/apagado indistinguibles.