El daltonismo, o discromatopsia, es una «anomalía de la visión de colores que afecta la capacidad de distinguir ciertos tonos, más comúnmente el rojo y el verde» (fuente: INSERM, Instituto Nacional de Salud e Investigación Médica de Francia). Esta condición afecta aproximadamente al 8% de los hombres y al 0,5% de las mujeres en poblaciones de origen europeo, es decir, cerca de 300 millones de personas en el mundo.
Pero reducir el problema del contraste al daltonismo sería un error. Un contraste insuficiente afecta a todos: las personas que consultan su teléfono bajo el sol, los usuarios cansados al final del día, los mayores cuya agudeza visual disminuye, e incluso los desarrolladores que prueban su sitio en una pantalla perfectamente calibrada sin darse cuenta de que el 90% de sus usuarios no tiene la misma pantalla.
El contraste no es un problema funcional. Tu botón funciona, tu enlace es clicable, tu formulario envía los datos. Pero si nadie puede leer el texto o distinguir el botón del fondo, la funcionalidad no sirve de nada. Es un problema visual, y se resuelve con herramientas visuales.
Índice
- Lo que el daltonismo realmente cambia en la percepción de un sitio
- El contraste según las WCAG: las cifras que debes conocer
- Por qué las herramientas clásicas no son suficientes
- El test visual con simulación de daltonismo
- Cómo integrar la verificación del contraste en tu workflow
- FAQ
Lo que el daltonismo realmente cambia en la percepción de un sitio
El daltonismo no es una ausencia total de visión de colores en la mayoría de los casos. Existen varios tipos, cada uno afectando la percepción de manera diferente.
La deuteranomalía es la forma más común. Afecta aproximadamente al 6% de los hombres y reduce la sensibilidad al verde. Los verdes y los rojos se confunden, los naranjas y los amarillos se vuelven difíciles de distinguir. Es el tipo que la mayoría de los diseñadores conocen vagamente, sin medir siempre las consecuencias reales.
La protanomalía (aproximadamente el 1% de los hombres) reduce la sensibilidad al rojo. Los rojos aparecen más oscuros y se confunden con los marrones y los verdes oscuros. Un mensaje de error en rojo sobre fondo oscuro puede literalmente desaparecer para estos usuarios.
La tritanomalía (menos del 0,01% de la población) afecta la percepción del azul y el amarillo. Es rara pero existe.
La acromatopsia (visión en escala de grises) es extremadamente rara pero representa el caso extremo donde solo importa el contraste de luminosidad.
Para un sitio web, las consecuencias son concretas y numerosas.
Un indicador de estado que utiliza únicamente rojo y verde (éxito/error) es inutilizable para un deuteranope. Un enlace coloreado sin subrayado puede ser invisible si su color se confunde con el texto circundante. Un botón de acción cuyo color de fondo tiene un contraste suficiente para una visión normal puede volverse ilegible bajo deuteranomalía.
Y estos problemas no son casos marginales. Con el 8% de los hombres afectados, en un equipo de 25 desarrolladores, hay estadísticamente 1 o 2 personas daltónicas. En tu base de usuarios de 100.000 personas, aproximadamente 4.000 hombres perciben tu sitio de manera diferente a como lo diseñaste.
El contraste según las WCAG: las cifras que debes conocer
Las WCAG definen ratios de contraste mínimos entre el texto y su fondo. Estos ratios se calculan a partir de la luminancia relativa de los dos colores, en una escala de 1:1 (sin contraste) a 21:1 (contraste máximo, negro sobre blanco).
Para el nivel AA, el más comúnmente exigido por las regulaciones:
El texto normal (menos de 18 puntos o menos de 14 puntos en negrita) debe tener un ratio de contraste de al menos 4.5:1. El texto de gran tamaño (18 puntos o más, o 14 puntos en negrita o más) necesita un ratio de al menos 3:1. Los elementos de interfaz no textuales (iconos, bordes de campos, indicadores de estado) también deben respetar un ratio de 3:1 (criterio 1.4.11).
Para el nivel AAA, las exigencias son más estrictas: 7:1 para el texto normal y 4.5:1 para el texto de gran tamaño.
Estas cifras no son arbitrarias. Se derivan de investigaciones sobre la percepción visual y tienen en cuenta la pérdida de sensibilidad al contraste relacionada con la edad. Una persona de 80 años necesita aproximadamente tres veces más contraste que una persona de 20 años para leer el mismo texto en las mismas condiciones.
El problema es que estos ratios se calculan para una visión de colores normal. Un contraste de 4.5:1 entre un texto rojo oscuro y un fondo verde oscuro satisface técnicamente el criterio WCAG, pero puede ser insuficiente para un deuteranope que no distingue estos dos colores. Las WCAG lo reconocen en el criterio 1.4.1 (uso del color): la información no debe basarse únicamente en el color.
Por eso verificar el ratio de contraste no es suficiente. También hay que verificar el contraste tal como lo perciben los diferentes tipos de daltonismo.
Por qué las herramientas clásicas no son suficientes
Las herramientas de análisis de contraste más utilizadas (el verificador de contraste integrado en Chrome DevTools, extensiones como WAVE o axe DevTools, las auditorías Lighthouse) son excelentes en lo que hacen: calcular el ratio de contraste entre dos colores específicos.
Pero presentan varias limitaciones.
Verifican el contraste declarado, no el contraste renderizado. Si una imagen de fondo, un degradado o un efecto de transparencia reduce el contraste efectivo, estas herramientas pueden no detectarlo. Un texto blanco sobre un fondo degradado de azul claro a azul oscuro puede tener un contraste suficiente en la parte superior de la zona pero insuficiente en la parte inferior. La herramienta mide un solo par de colores, no la realidad del renderizado.
No simulan el daltonismo en un contexto de test automatizado. Chrome DevTools permite simular el daltonismo manualmente, pero esta verificación no es automatizable en un pipeline CI/CD. Puedes simular la deuteranomalía para una página a la vez, pero no para 200 páginas en cada despliegue.
No detectan regresiones. Una auditoría Lighthouse te da una puntuación en un momento dado. No te alerta cuando un desarrollador modifica un color de fondo que degrada el contraste. Solo lo descubres en la próxima auditoría, si alguien recuerda ejecutarla.
Analizan los elementos individualmente, no el renderizado global. El contraste de un elemento depende de su contexto visual. Un texto gris medio puede ser perfectamente legible sobre un fondo blanco, pero volverse ilegible si un panel coloreado se coloca detrás de él tras una modificación del layout. Las herramientas de análisis DOM no capturan estas interacciones visuales.
El test visual con simulación de daltonismo
El test visual automatizado aporta un enfoque fundamentalmente diferente. En lugar de analizar el código CSS, captura el renderizado real de la página tal como aparece en el navegador, y luego compara ese renderizado con una referencia para detectar cualquier cambio.
Aplicado al contraste y al daltonismo, este mecanismo ofrece posibilidades poderosas.
Captura del renderizado real. El test visual toma una captura de pantalla de lo que el navegador muestra efectivamente. Los degradados, las imágenes de fondo, las transparencias, las sombras: todo se tiene en cuenta. El contraste medido es el contraste real, no el contraste teórico calculado a partir del CSS.
Simulación de daltonismo integrada. Aplicando filtros de simulación de daltonismo (matrices de transformación colorimétrica para deuteranopía, protanopía y tritanopía) a las capturas de pantalla, el test visual puede verificar que el contraste sigue siendo suficiente para cada tipo de visión de colores. Lo que era un test manual puntual se convierte en un test automatizado sistemático.
Detección de regresiones. Si un desarrollador modifica un color, un fondo o un degradado, el test visual detecta la diferencia. Si esta diferencia es significativa (superando el umbral de tolerancia configurado), el test falla y bloquea el despliegue. La regresión de contraste se detecta antes de llegar a producción.
Verificación cross-browser. Los navegadores no renderizan los colores de manera idéntica. Las diferencias de renderizado de fuentes, antialiasing y gestión de perfiles de color pueden afectar el contraste percibido. El test visual cross-browser captura estas diferencias y garantiza un contraste suficiente en todos los navegadores objetivo.
Cobertura exhaustiva. A diferencia de una auditoría manual que verifica algunas páginas representativas, el test visual automatizado puede cubrir todo tu sitio en cada despliegue. Cada página, cada componente, bajo cada condición de simulación.
Cómo integrar la verificación del contraste en tu workflow
La implementación de una verificación del contraste mediante test visual sigue un enfoque estructurado.
Identifica tus componentes críticos. Los formularios, los botones de acción, los mensajes de error y éxito, los indicadores de estado, los enlaces de navegación: estos son los elementos donde un problema de contraste tiene más impacto en la experiencia de usuario. Empieza por ellos.
Crea baselines en condiciones normales. Captura tus páginas y componentes en su estado de referencia. Estas capturas sirven como punto de comparación para detectar regresiones futuras.
Añade baselines con simulación de daltonismo. Para cada página o componente crítico, crea baselines adicionales con los filtros de simulación: deuteranopía, protanopía y tritanopía. Esto te da tres conjuntos de baselines adicionales que reflejan lo que tus usuarios daltónicos realmente ven.
Define umbrales de tolerancia estrictos. Para los tests de contraste, la tolerancia a las diferencias debe ser baja. Un cambio de color de algunos matices puede hacer caer un ratio de contraste por debajo del umbral WCAG. Un umbral de diferencia del 1 al 2% es apropiado para estos tests.
Integra en la CI/CD. Configura tus tests para ejecutarse automáticamente en cada pull request. Si un test de contraste falla, la pull request se bloquea hasta su corrección. Es la única manera de garantizar que las regresiones de contraste no lleguen a producción.
Educa a tu equipo. El mayor obstáculo para la accesibilidad de colores no es técnico, es el desconocimiento. Comparte los resultados de los tests de simulación de daltonismo con tus diseñadores y desarrolladores. Muéstrales concretamente lo que ven los usuarios daltónicos. La concienciación cambia los comportamientos de forma duradera.
Una herramienta como Delta-QA permite implementar esta vigilancia sin competencias técnicas avanzadas. Configuras tus páginas, tus condiciones de test y tus umbrales de tolerancia en una interfaz visual. Las capturas y comparaciones son automáticas.
Más allá del daltonismo: el contraste como cuestión universal
El daltonismo es el caso más documentado, pero el contraste afecta a una población mucho más amplia.
Las condiciones de iluminación. Según un estudio de Google (2018), el 70% del tiempo en el móvil se pasa fuera de condiciones de iluminación óptimas. Lo que es legible en una oficina climatizada se vuelve ilegible bajo el sol.
El envejecimiento. A los 60 años, la cantidad de luz que llega a la retina se reduce en aproximadamente un tercio respecto a los 20 años. Los mayores son usuarios digitales cada vez más activos.
La fatiga visual. Después de horas frente a una pantalla, la capacidad de distinguir contrastes bajos disminuye. Es un fenómeno documentado que afecta a prácticamente todos los trabajadores de oficina.
La calidad de las pantallas. Las pantallas baratas, los proyectores de sala de reuniones, los kioscos interactivos: el contraste real varía considerablemente según el hardware.
Diseñar para el contraste no es solo cumplir con las WCAG para evitar una demanda. Es reconocer que la legibilidad es una condición previa a cualquier interacción, y que las condiciones de lectura óptimas son la excepción, no la regla.
FAQ
¿Cómo saber si mi sitio tiene problemas de contraste para daltónicos?
La forma más directa es simular los diferentes tipos de daltonismo y verificar visualmente el resultado. Chrome DevTools ofrece esta funcionalidad manualmente (pestaña Rendering, Emulate vision deficiencies). Para una verificación sistemática y automatizada, el test visual con filtros de simulación integrados permite cubrir todo el sitio en cada despliegue.
¿El ratio de contraste WCAG garantiza la legibilidad para daltónicos?
No necesariamente. El ratio de contraste WCAG se basa en la luminancia relativa, que es independiente del tono. Un contraste de 4.5:1 entre dos colores con luminancia suficientemente diferente es conforme, pero si esos colores se confunden bajo deuteranopía, el texto puede seguir siendo difícil de distinguir. El criterio 1.4.1 de las WCAG exige además que el color no sea el único medio de transmitir una información.
¿Qué tipos de daltonismo hay que probar primero?
La deuteranomalía y la deuteranopía (confusión rojo-verde relacionada con el canal verde) afectan a aproximadamente el 6% de los hombres y constituyen la prioridad. La protanomalía y la protanopía (confusión rojo-verde relacionada con el canal rojo) afectan a aproximadamente el 2% de los hombres. La tritanopía (confusión azul-amarillo) es muy rara y representa un test complementario. Probar como mínimo la deuteranopía cubre la mayoría de los casos.
¿El test visual puede reemplazar una auditoría de contraste manual?
El test visual detecta las regresiones de contraste (un cambio que degrada el contraste respecto a la baseline). No realiza un cálculo de ratio de contraste para cada par texto/fondo. Los dos enfoques son complementarios: la auditoría manual o automatizada (vía axe-core) identifica las violaciones iniciales, y el test visual previene las regresiones futuras.
¿Cómo evitar problemas de contraste desde la fase de diseño?
Tres reglas fundamentales: nunca usar el color como único indicador (añadir siempre un texto, un icono o un patrón), utilizar paletas de colores probadas para daltonismo (herramientas como Sim Daltonism o Color Oracle permiten verificar en tiempo real), y verificar siempre el ratio de contraste antes de validar una elección de color. Los design systems modernos integran estas verificaciones en sus tokens de color.
¿A cuántas personas afectan realmente los problemas de contraste?
Más allá de los 300 millones de daltónicos en el mundo, los problemas de contraste afectan potencialmente a todos según las condiciones de uso. La OMS estima que 2.200 millones de personas tienen una deficiencia visual, incluyendo 1.000 millones de casos de presbicia no corregida. Y cualquier usuario que consulte una pantalla en condiciones de iluminación desfavorables se ve temporalmente afectado por un contraste insuficiente.
Conclusión
El contraste es un problema visual. No un problema funcional, no un problema estructural, no un problema de código. Es un problema de lo que la gente ve cuando mira tu sitio, en sus condiciones reales de uso, con su visión real.
Las herramientas de análisis de código detectan las violaciones de ratio de contraste en el CSS. Es necesario pero insuficiente. El test visual verifica el contraste en el renderizado real, con simulación de daltonismo, a través de todos los navegadores y todas las resoluciones, de manera automatizada y continua.
El 8% de los hombres son daltónicos. El 100% de los usuarios se ven afectados por las condiciones de iluminación, la fatiga visual y la calidad variable de las pantallas. El contraste no es un tema de nicho. Es el fundamento de la legibilidad de tu interfaz.