Por qué el 83.9% de los sitios web no cumple con el contraste de color

Cada año, WebAIM audita las páginas de inicio del millón de sitios principales. La encuesta de 2026 encontró fallos de contraste detectables en el 83.9% de ellas, con un promedio de 34 casos de bajo contraste por página. El año anterior fue el 79.1%.

La cifra va en aumento. Eso es lo interesante, porque verificar el contraste no es un problema de herramientas. El propio verificador de WebAIM es gratuito, lo es desde hace años, y todos los diseñadores saben que existe.

Verificar no es el cuello de botella

Pregúntales a los diseñadores qué les impide corregir un fallo de contraste y las respuestas coinciden de forma llamativa:

“La mayoría quiere seguir las reglas de WCAG, pero se queda dando vueltas sin saber cómo resolver los problemas de contraste de color.”

“Muchos te dirán ‘elige colores accesibles’ sin ayudarte de verdad a entender cómo, sobre todo cuando tienes que ceñirte a ciertos colores de marca.”

“WCAG intimida y confunde a la mayoría. Te dice qué tiene que aprobar, pero no da pautas sobre cómo lograrlo.”

Ninguna de estas es una queja sobre la detección. Todas tratan del paso siguiente: saber qué cambiar.

Las herramientas existentes responden “¿esto aprueba?” y se detienen ahí. Es una respuesta completa a la pregunta equivocada. El diseñador ya sospechaba que no aprobaba. Lo que necesita es el color más cercano que funcione y que siga leyéndose como la marca, y se queda solo buscándolo, moviendo un valor hex hasta que la cifra se pone en verde.

Cuatro razones por las que empeora en lugar de mejorar

Los colores de marca son restricciones, no elecciones. El color está en el logotipo, en la presentación y en un manual de marca ya aprobado. “Elige otro color” no es un consejo que un diseñador pueda seguir por su cuenta. Así que el fallo se queda.

El modo oscuro duplicó la superficie. Ahora cada paleta tiene que funcionar en dos direcciones, y la fórmula de WCAG 2 es menos fiable en el extremo oscuro. Un tema que aprueba sobre blanco y se invierte sin volver a verificarlo es un fallo común e invisible.

Los sistemas de diseño propagan un solo error por todas partes. Un token con contraste insuficiente en una biblioteca de componentes se reproduce en todos los productos que la usan. Los sistemas multiplican el efecto en las dos direcciones.

El contraste se revisa al final. Como lo expresó alguien del oficio, muchos diseñadores “solo ajustan el contraste cerca del final de la fase de diseño, y solo si es fácil hacerlo sin estropear su diseño”. Para entonces, el color ya sostiene todo el diseño, y cambiarlo significa revisar decisiones que nadie quiere reabrir.

Lo que la cifra mide y lo que no

Conviene ser precisos. La encuesta de WebAIM detecta los fallos automáticamente, lo que significa que capta los casos de texto sobre fondo sólido y se le escapan otros: texto sobre imágenes, texto sobre degradados y todo lo que requiera criterio.

Así que el 83.9% es un piso, no un techo. La cifra real es más alta.

Tampoco implica que esos sitios sean inutilizables. Muchos fallos son marginales: un 4.2:1 que debería ser 4.5:1. Importan, pero no son lo mismo que un texto invisible.

La solución que de verdad escala

Los sitios se corrigen de uno en uno. El patrón que mueve la cifra global es lograr que la opción correcta sea la fácil:

Pon la restricción en el token, no en la revisión. Si tu sistema de diseño entrega --text-brand ya en un paso de la escala que aprueba, nadie tiene que acordarse. La escala se acordó por ti.

Prueba el contraste en CI. Una proporción que no aprueba debería romper un build igual que lo hace una prueba unitaria fallida. Lo hacemos en nuestro propio sitio: el build falla si alguna de nuestras combinaciones de colores deja de aprobar en nuestra propia herramienta. La primera vez que lo ejecutamos detectó siete fallos reales, en partes de la interfaz que aprobaban WCAG 2 en todas partes.

Verifica con el tamaño y el peso que publicas. WCAG 2 no ve la tipografía, así que una proporción que aprueba en un pie de foto de 12px con trazo finísimo no demuestra nada. APCA sí lo modela, y resulta incómodo: 14px en regular no aprueba con ningún contraste.

Dale a la gente la respuesta, no el veredicto. Si una herramienta puede calcular que el azul de tu marca necesita ser un 11% más oscuro para aprobar sin perder su tono, debería decirlo en lugar de reportar 3.02:1 y desentenderse.

El hueco que esto cierra

El motivo por el que construimos nuestro verificador de contraste como lo hicimos es ese último punto. El diagnóstico nunca fue lo difícil.

Busca en el propio eje de luminosidad de tu color el valor más cercano que aprueba, mantiene el tono para que el resultado se siga leyendo como tu marca, ordena las opciones según cuánto se mueve el color y te propone cambiar el fondo cuando ese es el compromiso menor.

Puedes probarlo con un color al que te dijeron que tenías que renunciar.