Simulador de daltonismo

Por qué importa diseñar para la deficiencia de la visión del color

La deficiencia de la visión del color (DVC) es común. El Instituto Nacional del Ojo de EE. UU. informa de que alrededor de 1 de cada 12 hombres tiene alguna forma de DVC; las mujeres se ven afectadas en una proporción mucho menor porque las formas más comunes se heredan a través de genes recesivos ligados al cromosoma X. En conjunto, la población mundial con algún grado de DVC se cuenta por cientos de millones. Cualquier diseño de cara al usuario que dependa del rojo y el verde para transmitir significado (indicadores de error frente a acierto, gráficos, indicadores de estado, mensajes de validación) fallará a una porción considerable de los usuarios, a menos que el color se combine con otra señal.

Esto también es un requisito formal de accesibilidad. El Criterio de Conformidad 1.4.1 de WCAG 2.2 («Uso del color»), Nivel A establece la regla directamente: «El color no se usa como único medio visual para transmitir información, indicar una acción, solicitar una respuesta o distinguir un elemento visual.» El Nivel A es el listón de conformidad más bajo de WCAG: no cumplirlo significa que un sitio no solo es inaccesible, sino legalmente no conforme en las jurisdicciones que exigen la conformidad con WCAG (la Sección 508 de EE. UU., la Ley de Accesibilidad de la UE, la Ley de Igualdad del Reino Unido).

Las ocho formas de DVC

La visión del color humana se basa en tres tipos de fotorreceptor de cono: los conos L (longitud de onda larga, pico cerca del rojo), los conos M (longitud de onda media, pico cerca del verde) y los conos S (longitud de onda corta, pico cerca del azul violáceo). Cada forma de DVC se corresponde con uno de estos conos que está ausente (-anopia) o desplazado en su sensibilidad (-anomalía).

La deuteranomalía es la forma más prevalente porque los genes de los fotopigmentos de los conos L y M son adyacentes en el cromosoma X y difieren en solo unos pocos aminoácidos. Pequeñas mutaciones desplazan con facilidad el pico de sensibilidad del cono M más cerca del cono L, lo que reduce la capacidad del cerebro para discriminar entre el rojo y el verde.

Por qué los hombres se ven afectados con más frecuencia

Los genes de los fotopigmentos del cono L (OPN1LW) y del cono M (OPN1MW) se encuentran ambos en el cromosoma X. Los hombres heredan solo un X (de su madre); las mujeres heredan dos (uno de cada progenitor). Para que se exprese una deficiencia recesiva, una mujer necesitaría el gen deficiente en ambos cromosomas X, mientras que a un hombre solo le hace falta en su único X. La aritmética produce una diferencia de prevalencia de aproximadamente 10× entre hombres y mujeres específicamente para la DVC rojo-verde. El gen del cono S está en el cromosoma 7 y es autosómico: la tritanopia y la tritanomalía afectan a hombres y mujeres en proporciones similares, pero ambas formas son muy raras de entrada.

Los requisitos de contraste de WCAG también se aplican

Más allá del SC 1.4.1, WCAG también impone relaciones de contraste mínimas para el texto y los componentes de la interfaz, todas medidas con respecto al emparejamiento de colores realmente visible:

• SC 1.4.3 Contraste (mínimo), Nivel AA: al menos 4,5:1 para el texto de cuerpo normal, 3:1 para el texto grande o en negrita.
• SC 1.4.6 Contraste (mejorado), Nivel AAA: 7:1 para el texto normal, 4,5:1 para el grande.
• SC 1.4.11 Contraste no textual, Nivel AA: 3:1 para los componentes de la interfaz y los objetos gráficos (bordes de botones, indicadores de foco, contornos de iconos).

Usa este simulador junto con un comprobador de contraste. Dos colores pueden tener una relación de contraste de 4,5:1 perfectamente correcta en la visión normal y aun así ser indistinguibles para una persona con deuteranopia. El simulador detecta el segundo modo de fallo que la comprobación de contraste pura pasa por alto.

Errores de diseño comunes y sus soluciones

• Indicadores de estado en rojo / verde para acierto frente a error. Combínalos con un icono (✗ / ✓), una etiqueta de texto o formas distintas. Nunca te bases solo en el tono.
• Enlaces de color sin subrayado. Muchos usuarios con DVC no pueden distinguir un enlace de color del texto de cuerpo que lo rodea. Añade un subrayado, un cambio de grosor de fuente o ambos.
• Gráficos de barras coloreados solo por categoría. Añade patrones, etiquetas directas o usa una paleta segura para daltónicos (Viridis, Cividis, Magma, Okabe-Ito, los conjuntos seguros para DVC de ColorBrewer).
• Mapas de calor con degradados de rojo→verde. Cámbialos por paletas perceptualmente uniformes: Viridis de Matplotlib (predeterminada desde 2017) y Cividis (Nuñez et al, 2018, diseñada específicamente para observadores con DVC) son ambas seguras.
• Validación de formularios solo con texto rojo. Combínala con un icono, un mensaje de error explícito y un cambio visible en el contorno del campo.
• Instrucciones del tipo «Haz clic en el botón verde». Refiérete a la posición o a la etiqueta, no al color.
• Leyendas de mapas con tonos similares. Los mapas coropléticos con escalas de rojo-naranja-amarillo pueden colapsar en dos colores indistinguibles con la deuteranopia. Usa una escala de un solo tono (de azul claro a azul oscuro) o una paleta divergente segura para DVC.
• Códigos de color en el diseño de videojuegos. Es famoso que los Apricorns del Pokémon Crystal original y las PokéParadas codificadas por color del Pokémon GO original presentaban decisiones de rojo-verde irresolubles para muchos jugadores con DVC.

Paletas seguras para daltónicos

• Viridis: la paleta secuencial predeterminada de Matplotlib desde 2017. Perceptualmente uniforme tanto en la visión normal como en la DVC.
• Cividis: diseñada específicamente para observadores con DVC (Nuñez, Anderton & Renslow, PLOS ONE 2018). Mantiene una distancia perceptual uniforme incluso con la deuteranopia o la protanopia simuladas.
• ColorBrewer: las paletas de Cynthia Brewer para cartografía. El sitio marca explícitamente las variantes seguras para DVC para datos secuenciales, divergentes y cualitativos.
• Okabe-Ito: una paleta cualitativa de ocho colores diseñada por Masataka Okabe y Kei Ito para la accesibilidad en la publicación científica. La paleta de referencia recomendada para datos categóricos con hasta 8 categorías.

Las herramientas de desarrollo del navegador también tienen simuladores de DVC

Tanto las herramientas de desarrollo de Chrome como las de Edge tienen una opción integrada de «Emular deficiencias visuales» (en la pestaña Rendering) que puede simular la protanopia, la deuteranopia, la tritanopia y la acromatopsia en toda la ventana gráfica. El Inspector de accesibilidad de Firefox expone un simulador similar. Son estupendas para auditar páginas enteras durante las revisiones de diseño; esta herramienta de un solo color las complementa al aislar una muestra cada vez, para que puedas decidir sobre una paleta sin que el resto de la página confunda la comparación.

Pruebas diagnósticas de las que quizá hayas oído hablar

• Las láminas de Ishihara (Shinobu Ishihara, 1917), las famosas láminas de puntos de colores con números ocultos. Estándar en entornos clínicos para el cribado de las deficiencias rojo-verde.
• Prueba de los 100 tonos de Farnsworth-Munsell: ordena las fichas en orden continuo de tono. Evalúa la discriminación sutil, no solo la presencia o ausencia de DVC.
• Anomaloscopio: ajusta una mezcla de rojo y verde para que coincida con una referencia amarilla. Se usa para la clasificación clínica del tipo y la gravedad de la DVC.

Esta herramienta no es un diagnóstico: simula cómo le aparece un color determinado a alguien con diversas formas de DVC para que puedas diseñar teniéndolo en cuenta, no para evaluar la visión de nadie.

Errores frecuentes

1. Tratar la DVC como una preocupación de nicho. Uno de cada 12 hombres es una porción considerable de la base de usuarios de cualquier producto de consumo, y la mayoría nunca lo comunica porque han aprendido a apañárselas toda su vida.
2. Suponer que el «modo oscuro» o el «alto contraste» lo cubren. El contraste y la DVC son ejes independientes. Una paleta de alto contraste todavía puede depender de distinciones rojo-verde que fallan.
3. Probar solo con la deuteranopia. La deuteranopia es la forma más común, pero no la única: la protanopia, la tritanopia y las variantes parciales -anomalía producen confusiones diferentes. Recórrelas todas.
4. Usar solo el simulador e ignorar el comprobador de contraste. Una paleta puede ser segura para la DVC y aun así no cumplir los mínimos de contraste de WCAG 1.4.3. Usa ambas herramientas.
5. Elegir colores por su nombre en lugar de por su distancia percibida. «Rojo, verde y azul» suena bien separado; en la DVC puede colapsar en «oscuro, oscuro, azul». Prueba las muestras reales.

Preguntas frecuentes

¿Cómo de precisa es la simulación?

La simulación de DVC es una aproximación, no una representación perfecta. Los algoritmos estándar (el método de Brettel, Viénot & Mollon de 1997, refinado por Viénot en 1999 y por Machado et al en 2009) proyectan un color sobre la «línea de confusión» del cono ausente o desplazado en el espacio de color LMS. El resultado es lo que vería en promedio alguien con dicromacia completa, pero los usuarios reales con DVC varían individualmente: el cerebro compensa con señales de luminancia, contexto y experiencia previa que una simulación estática no puede replicar.

¿Se envía mi imagen o color a algún sitio?

No. La simulación se ejecuta enteramente en tu navegador usando un elemento canvas para aplicar la transformación de color píxel a píxel. No se sube, registra ni almacena nada. Esto importa cuando la imagen que pruebas es una maqueta de diseño no publicada, una captura de pantalla de una interfaz confidencial o cualquier otra cosa que no compartirías con un tercero.

¿Debería diseñar para las ocho formas de DVC?

En la práctica, diseñar para las formas más comunes (la deuteranopia y la deuteranomalía) cubre a la inmensa mayoría de los usuarios. Añadir una comprobación con la protanopia te cubre la mayor parte del resto. La tritanopia y la tritanomalía son lo bastante raras como para que cumplir las pruebas deutan / protan suela ser suficiente, aunque un diseño debidamente accesible que no dependa del tono en absoluto (combinado con iconos, patrones o etiquetas) cubre a todo el mundo automáticamente.

Mi paleta actual lleva «segura para DVC» en el nombre. ¿Aun así necesito probarla?

Sí. «Segura para DVC» suele significar que los colores de categoría de la paleta son distinguibles bajo simulación, pero en cuanto compones una interfaz real (texto sobre un fondo de color, un icono sobre un relleno, un estado de hover desplazado un 5 % de luminosidad) puedes reintroducir la confusión. Prueba tus pares de colores compuestos, no solo la paleta de origen.

¿Cuál es la diferencia entre la protanopia y la protanomalía?

La protanopia es la ausencia del fotopigmento del cono L (rojo): la persona afectada no tiene ninguna sensibilidad funcional al rojo. La protanomalía es un desplazamiento del pico de sensibilidad del cono L en lugar de su ausencia: la persona afectada tiene una discriminación del rojo reducida, pero no nula. El mismo patrón para deutera-/deuter- y trita-/tritan-: la -anopia es la forma fuerte, la -anomalía es la forma parcial.

¿Funcionan de verdad las gafas correctoras del color (EnChroma)?

Para muchas personas con deficiencia rojo-verde, sí: amplían la diferencia percibida entre ciertos rojos y verdes al filtrar longitudes de onda concretas que se superponen entre los conos L y M. No «curan» la DVC ni hacen que un dicrómata vea el color con normalidad; la situación de los fotopigmentos no cambia. La eficacia varía según la persona y las condiciones de iluminación; la luz natural del exterior suele ser donde más ayudan.

Herramientas relacionadas