Daltonismo y diseño web: lo que debes saber

Más común de lo que la mayoría de los diseñadores cree

La deficiencia de visión del color —comúnmente llamada daltonismo— afecta a aproximadamente el 8% de los hombres y al 0,5% de las mujeres. Eso es cerca de 1 de cada 12 hombres y 1 de cada 200 mujeres, lo que la hace más prevalente que la mayoría de las demás discapacidades que abordan los estándares de accesibilidad web.

Sin embargo, se pasa por alto de forma rutinaria en el diseño. Los equipos prueban con lectores de pantalla y navegación por teclado, ejecutan un análisis WCAG automatizado y dan por terminado el trabajo de accesibilidad, sin comprobar nunca si su paleta de colores es legible para los usuarios daltónicos.

Entender el daltonismo, y lo que realmente le hace a las interfaces web que diseñas, es el primer paso para corregirlo.

Los tipos y qué provocan

La deficiencia de visión del color se presenta de varias formas, y no todas producen la misma experiencia.

Deficiencias rojo-verde (las más comunes)

Protanopia — ausencia completa de los fotorreceptores de conos rojos. El rojo aparece oscuro o negro. Las distinciones rojo-verde se pierden.

Protanomalía — sensibilidad reducida al rojo. El rojo, el naranja y el amarillo se desplazan hacia el verde, y la experiencia general es más apagada, como si se hubiera bajado el canal rojo.

Deuteranopia — ausencia completa de los receptores de conos verdes. La forma más común de daltonismo. El verde y el rojo se confunden; el mundo parece filtrado a través de una lente marrón amarillenta.

Deuteranomalía — sensibilidad reducida al verde. Similar a la deuteranopia pero más leve. El tipo más prevalente en general, afecta a cerca del 5% de los hombres.

Deficiencias azul-amarillo (más raras)

Tritanopia — ausencia de los receptores de conos azules. El azul aparece verde, y el amarillo aparece pálido o invisible. Rara.

Tritanomalía — sensibilidad reducida al azul. El azul-verde y el rojo-púrpura se confunden.

Monocromacia (muy rara)

Acromatopsia — ausencia de todos los receptores de conos de color. Solo se percibe el brillo; el mundo aparece en tonos de gris. A menudo se acompaña de sensibilidad a la luz y agudeza visual reducida.

Cómo el daltonismo rompe los patrones web comunes

Conocer los tipos en abstracto es menos útil que saber qué decisiones de diseño concretas causan problemas. Estas son las más comunes.

Estados de error indicados solo con rojo

Poner en rojo el borde de un campo de formulario para mostrar un error de validación es uno de los patrones más extendidos del diseño web. Para los usuarios con deficiencia rojo-verde, el rojo sobre blanco o el rojo sobre gris puede ser casi invisible, o indistinguible de un estado normal sin foco.

Esto está cubierto directamente por la norma WCAG 2.2 1.4.1 Uso del color (Nivel A): el color no debe ser el único medio de transmitir información, indicar una acción, solicitar una respuesta o distinguir un elemento visual.

La solución es sencilla: combina el color con un segundo indicador visual: un icono, una etiqueta de texto, un cambio en el grosor del borde o cualquier otra señal que no sea de color.

<!-- Depende solo del color: falla en 1.4.1 -->
<input type="email" class="field--error">

<!-- Color más icono más texto: aprueba -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Introduce una dirección de correo válida.
  </p>
</div>

Contraste insuficiente

El bajo contraste es un problema distinto del daltonismo, pero se intersecan. Muchas paletas de colores que parecen legibles para una visión del color típica se vuelven aún más difíciles de leer bajo una deficiencia de visión del color, porque la diferencia percibida entre el primer plano y el fondo se reduce todavía más.

WCAG 1.4.3 exige una relación de contraste mínima de 4.5:1 para texto normal y de 3:1 para texto grande. Probar el contraste con una herramienta como el selector de color de las DevTools del navegador o un verificador dedicado es innegociable: no te fíes de la inspección visual.

Visualización de datos codificada solo en color

Un gráfico circular con seis segmentos diferenciados solo por color. Un mapa con un degradado de rojo a verde. Un gráfico de líneas donde cuatro conjuntos de datos se distinguen únicamente por el tono.

Para los usuarios con deuteranopia, el rojo y el verde se vuelven indistinguibles. El significado del gráfico se derrumba por completo. Para más sobre esto, consulta nuestra guía sobre visualización de datos accesible.

Enlaces que dependen solo del color para destacar del texto del cuerpo

De forma predeterminada, los navegadores subrayan los enlaces. Muchos diseñadores eliminan este subrayado y dependen solo del color para distinguir los enlaces del texto que los rodea. Los usuarios con deficiencia de visión del color —y especialmente quienes usan temas de bajo contraste— pueden no identificar los enlaces en absoluto.

WCAG 1.4.1 también se aplica aquí. Si el color del enlace es el único indicador visual (sin subrayado, sin negrita, sin ningún otro diferenciador), el enlace no es accesible para los usuarios daltónicos.

La solución más sencilla: restaurar el subrayado. Como alternativa, asegúrate de que el color del enlace tenga suficiente contraste tanto con el color del texto del cuerpo como con el fondo.

Diseñar teniendo en cuenta el daltonismo

Usa codificación redundante

Añade un segundo canal visual junto al color. En gráficos: añade patrones, texturas o etiquetas de datos. En indicadores de estado: añade iconos. En estados de formulario: añade texto. El objetivo es que alguien que elimine por completo el color del diseño aún pueda entenderlo todo.

Prueba con herramientas de simulación

Chrome DevTools tiene una simulación de daltonismo integrada. Abre DevTools > panel Rendering > “Emulate vision deficiencies”. Puedes simular protanopia, deuteranopia, tritanopia y acromatopsia.

Figma y otras herramientas de diseño tienen complementos similares. Ejecutar una simulación toma segundos y a menudo revela problemas que no eran visibles en la vista previa estándar.

Comprueba tu paleta en su conjunto

No pruebes solo pares de elementos individuales. Mira la paleta completa junta: colores primario, secundario, de error, de éxito, de advertencia e informativos. Bajo la simulación de deuteranopia, ¿el rojo de error y el verde de éxito se ven similares? Si es así, tienes un problema independientemente de que tus relaciones de contraste técnicamente aprueben.

Evita las combinaciones problemáticas

Especialmente poco fiables para la deficiencia de visión del color:

Rojo y verde
Verde y marrón
Azul y púrpura
Verde y gris
Verde y negro

Cuando estos pares deban aparecer en el mismo contexto, diferéncialos mediante la luminosidad o el patrón en lugar del tono.

Lo que WCAG cubre y lo que no

WCAG cubre el contraste de color (1.4.3, 1.4.11) y la prohibición de usar el color como único medio para transmitir información (1.4.1). No especifica qué colores puedes o no puedes usar, ni exige que toda tu paleta sea perceptible bajo cada tipo de deficiencia de visión del color.

Lo que exige es que no se pierda ningún significado cuando se elimina el color. Esa es la prueba práctica. Elimina el color de tu diseño. ¿Sigue siendo accesible cada pieza de información por otros medios?

Si la respuesta es sí, has cumplido el requisito. Si los estados de error desaparecen, si los datos del gráfico se vuelven ambiguos, si los enlaces se vuelven invisibles, tienes trabajo por hacer.

Nuestras auditorías de accesibilidad incluyen la accesibilidad del color como parte estándar de la revisión. Si quieres saber en qué punto se encuentra tu diseño actual, ejecuta un análisis automatizado gratuito para detectar los problemas automatizables como punto de partida.