Contraste (mínimo)

Qué se exige

El texto y las imágenes de texto deben tener una relación de contraste de al menos 4,5:1 con respecto al fondo. El texto grande —definido como 18 pt (24 px) en peso normal o 14 pt (18,66 px) en negrita— solo requiere 3:1. La relación se calcula a partir de la luminancia relativa del primer plano y el fondo. Los logotipos, nombres de marca y texto puramente decorativo están exentos. Los controles inactivos también están exentos, aunque esa exención es más estrecha de lo que suelen suponer los diseñadores.

Cómo cumplir este criterio

• Pasar cada combinación de texto sobre fondo por un verificador de contraste (axe DevTools, WebAIM, Stark, complementos de Figma). Alcanzar un mínimo de 4,5:1.
• Para el texto de marcador de posición en gris claro de los campos de formulario, elevarlo a al menos 4,5:1 respecto al fondo del campo; el texto de marcador también es texto.
• Auditar las secciones de cabecera con texto sobre imagen. El color de fondo varía por píxel, por lo que conviene comprobar la zona de peor caso o añadir una superposición oscura.
• En el modo oscuro, recalcular cada relación: los valores de color que superan el umbral sobre blanco a menudo lo incumplen sobre casi-negro.
• Para los colores de marca que no superan el umbral sobre blanco, oscurecer el color de marca solo para el texto y conservar el original para los elementos gráficos.
• En los botones, lo relevante es el contraste entre la etiqueta y el fondo del botón, no el contraste entre el botón y la página.

Fallos habituales

• Texto de ayuda en gris claro (#999 sobre #fff = 2,85:1) en campos de formulario; falla claramente.
• Texto blanco sobre un botón de color de marca cuando dicho color es de saturación media (naranja, verde-amarillo, cian).
• Titulares de cabecera colocados sobre fotografías sin superposición; el contraste varía a lo largo de la imagen y a menudo cae por debajo de 3:1.
• Texto de marcador de posición con el mismo color que la etiqueta, pero con menor peso, lo que lo convierte en el elemento de menor contraste de la página.
• Botones «inactivos» o «deshabilitados» con un contraste de 2:1, lo cual es aceptable si son verdaderamente no interactivos, pero a menudo siguen siendo enfocables por tabulación, lo que anula la exención.
• Valores de color en modo oscuro que replican el modo claro sin recalcular las relaciones: #bbb sobre #222 está cerca del umbral, pero no lo alcanza.

Por qué importa

El criterio 1.4.3 es el fallo individual más citado en las auditorías de las WCAG, sin excepción. Lighthouse, axe, Stark y todas las herramientas automatizadas lo detectan de forma fiable, por lo que también es el más barato de identificar. La corrección suele ser un único cambio en el valor del token de diseño que se propaga por todo el sistema: se hace una vez, se prueba una vez y se publica. Ignorarlo es casi siempre una compensación entre identidad de marca y accesibilidad que acaba derivando en una reclamación.