Contraste de color insuficiente: cómo detectarlo y corregirlo

El error de contraste de color es el que aparece con más frecuencia a las auditorías de accesibilidad web. Es fácil de entender, fácil de medir y, en la mayoría de casos, fácil de corregir. Y a pesar de todo, es presente en una proporción altísima de webs.

Qué es el contraste de color

El contraste de color es la diferencia de luminositat entre el color del texto y el color del fondo sobre el cual aparece. Cuando esta diferencia es insuficiente, el texto es difícil o imposible de leer para personas con baja visión, daltonismo o simplemente en condiciones de luz adversas, una pantalla al exterior con sol, por ejemplo.
Las WCAG 2.2 miden el contraste con una ratio numérica. Una ratio de 1:1 significa que texto y fondo son idénticos, y es ilegible. Una ratio de 21:1 es el máximo posible, texto negro sobre fondo blanco.

Qué exige el nivel AA

El nivel AA, el mínimo exigido por ley, establece:

• Texto normal (hasta 18px regular o 14px en negrita): contraste mínimo de 4,5:1
• Texto grande (18px o más al regular, o 14px o más en negrita): contraste mínimo de 3:1
• Elementos de interfaz y gráficos informativos (botones, iconos, campos de formulario): contraste mínimo de 3:1

El nivel AAA, más exigente pero no obligatorio, eleva el mínimo a 7:1 para texto normal y 4,5:1 para texto grande.

Los errores más habituales

Estos son los casos que aparecen con más frecuencia a las auditorías:

• Texto gris claro sobre fondo blanco — el clásico del diseño minimalista. Un gris como #999999 sobre blanco tiene una ratio de 2,85:1, muy por debajo del mínimo.
• Texto blanco sobre fondo de color claro — botones naranja, amarillo o verde claro con texto blanco suelen fallar.
• Texto sobre imagen de fondo — si no hay una capa de color sólido en medio, el contraste no se puede garantizar.
• Placeholders de formulario — el texto gris claro de los placeholders casi nunca cumple el mínimo. Pero cuenta: los placeholders no sustituyen las etiquetas, y este es un error diferente.
• Texto en sido hover o foco — el contraste tiene que cumplirse en todos los estados del elemento, no solo en el estado por defecto.

Como medir el contraste

Hay varias herramientas para medir el contraste antes de publicar:

• WebAIM Contraste Checker (webaim.org/resources/contrastchecker) — introduces los dos colores y te da la ratio y si supera los niveles A, AA y AAA.
• WAVE (wave.webaim.org) — analiza tu web y marca los elementos con contraste insuficiente directamente sobre la página.
• Colour Contraste Analyser — aplicación de escritorio que permite medir el contraste de cualquier elemento a la pantalla con un cuentagotas.
• Nuestra herramienta de autoevaluación — analiza tu web automáticamente y detecta los errores de contraste entre todos los otros criterios WCAG.

Cómo corregirlo

En la mayoría de casos no hace falta un rediseño. Las correcciones habituales son:

• Oscurecer el texto — si tienes texto gris, hazlo unos tonos más oscuro hasta que supere el 4,5:1. A menudo un cambio de #999 a #767676 ya es suficiente para superar el mínimo (esta es la ratio exacta de 4,54:1).
• Aclarar u oscurecer el fondo — si no puedes tocar el color del texto, ajusta el fondo.
• Aumentar la medida del texto — si el texto supera los 18px, el mínimo baja a 3:1, cosa que dóna más margen.
• Añadir una capa semitransparente — en textos sobre imágenes, una capa negra o blanca con opacidad entre el 40% y el 60% suele ser suficiente para garantizar el contraste.

Una cosa que hay que tener en cuenta: corregir el contraste no tendría que romper el diseño. En la mayoría de casos, oscurecer ligeramente un gris o ajustar un color de botón es un cambio imperceptible visualmente para la mayoría de usuarios, pero hace una diferencia enorme para quien tiene baja visión.

Contraste y elementos de interfaz

Un error menos conocido: el criterio de contraste se aplica también a los elementos de interfaz, no solo en el texto. Los contornos de los campos de formulario, los iconos informativos y los componentes visuales que transmiten información tienen que tener un contraste mínimo de 3:1 respecto al fondo adyacente.
Un campo de formulario con contorno gris claro sobre fondo blanco es un error WCAG, aunque el texto dentro del campo sea perfectamente legible.

Cuando las herramientas automáticas no pueden confirmar el error

Las herramientas automáticas como axe-core a veces marcan elementos de contraste como «incompletos» en lugar de errores confirmados. Esto pasa cuando el texto aparece sobre un gradiente, una imagen de fondo o un color calculado dinámicamente, y la herramienta no puede determinar el color exacto del fondo y prefiere no confirmar el error en lugar de equivocarse.
En estos casos hace falta revisión manual: medir el contraste real con una herramienta de cuentagotas sobre el resultado visual final.