Daltonismo y diseño web: cómo elegir colores accesibles

Una persona daltónica cruza la calle sin problema, aunque no distinga bien el rojo del verde del semáforo. ¿Cómo lo hace? No por el color, sino por la posición: el rojo siempre va arriba y el verde abajo. Ese truco cotidiano, que parece menor, encierra la regla más importante del diseño con color accesible: nunca confíes solo en el color para transmitir información.

En una calle, equivocarse de color puede ser peligroso. En un sitio web, deja a una parte de tus usuarios sin entender qué campo quedó mal, cuál es el enlace o qué significa ese gráfico. Y esa parte no es pequeña.

Avatar de
Escrito por

De dónde viene el nombre

El término daltonismo viene de John Dalton, el químico inglés del siglo XVIII más conocido por su teoría atómica. Dalton no veía los colores como el resto y lo notó en carne propia: para él, ciertos rojos se confundían con sombras o con el verde. En 1794 publicó la primera descripción científica de la condición, basada en su propia visión, y por eso quedó bautizada con su apellido. Tan en serio se lo tomó que dejó instrucciones para que, tras su muerte, examinaran sus ojos y buscaran la causa.

El nombre técnico es discromatopsia o deficiencia en la visión del color, pero "daltonismo" es el que quedó en el lenguaje común.

Cuántas personas y de qué tipo

El daltonismo es mucho más frecuente de lo que se cree, sobre todo en hombres. Afecta a cerca de 1 de cada 12 hombres (alrededor del 8%) y a 1 de cada 200 mujeres. La diferencia se explica por la genética: es un rasgo recesivo ligado al cromosoma X, así que los hombres, que tienen uno solo, quedan más expuestos. En la práctica, en cualquier audiencia de tamaño medio hay personas daltónicas, las veas o no.

No todos ven igual. Los tipos más comunes, que suman cerca del 99% de los casos, afectan la percepción del rojo y el verde: la protanopia y la protanomalía, ligadas al rojo, y la deuteranopia y la deuteranomalía, ligadas al verde. Existe un tipo más raro que afecta el azul y el amarillo, la tritanopia. Y en el extremo, muy poco frecuente, está la acromatopsia, en la que la persona ve solo en blanco, negro y grises, casi siempre con baja agudeza visual.

Conviene recordar que el daltonismo no es la única condición que cambia cómo se perciben los colores. La baja visión, las cataratas y la pérdida de sensibilidad al contraste que llega con la edad también afectan, y suman muchas más personas al grupo de quienes no distinguen colores cercanos con facilidad. Diseñar pensando en el daltonismo termina ayudando a todos ellos.

El color carga significado en la web

El problema de fondo es que en una interfaz el color casi nunca es decorativo: comunica. Un campo de formulario que se pone rojo para avisar un error. Un mensaje verde que confirma que algo salió bien. Un enlace que se distingue del texto solo por ser de otro color. Una barra de un gráfico que significa una cosa según su tono. Un asterisco rojo que marca lo obligatorio.

Para quien no distingue ese color, todo ese significado desaparece. El formulario no avisa nada, el enlace se confunde con el texto, el gráfico es un conjunto de barras iguales. Por eso las pautas internacionales de accesibilidad, las WCAG, tienen un criterio dedicado, el llamado "uso del color": la información nunca debe depender únicamente del color. Siempre tiene que haber una segunda señal.

Cómo elegir colores accesibles

La buena noticia es que arreglar esto no obliga a renunciar a tu paleta. Son tres movimientos concretos.

El primero, y el más importante, es no depender solo del color. Suma una segunda pista a cada cosa que hoy distingues con tono: un ícono de alerta junto al rojo del error, la palabra "obligatorio" además del asterisco, un patrón o una etiqueta en cada barra del gráfico, y enlaces subrayados en lugar de solo coloreados. Si la información se entiende incluso en blanco y negro, vas bien.

El segundo es cuidar el contraste, porque un daltónico, además de confundir tonos, suele necesitar más diferencia de luminosidad para leer cómodo. Acá aplican los ratios de contraste que define WCAG, 4.5:1 para texto normal y 3:1 para texto grande. No es casualidad que, cuando analizamos 228 páginas chilenas, el problema de contraste fuera el más común de todos, presente en más del 80% de los sitios.

El tercero es probar, no suponer. Y para eso existen herramientas.

Herramientas para simular el daltonismo

No necesitas ser daltónico para ver tu diseño como lo vería uno. Hay simuladores que aplican el filtro por ti:

  • Coblis: simulador web gratuito. Subes una imagen o captura de tu diseño y la muestra bajo distintos tipos de daltonismo. Rápido para una revisión puntual.

  • Color Oracle: aplicación de escritorio para Windows, Mac y Linux. Aplica el filtro a toda la pantalla en tiempo real, así que sirve para revisar el sitio completo mientras navegas.

  • Stark: complemento para Figma, Sketch y Adobe XD. Simula daltonismo y revisa contraste sin salir de la herramienta de diseño, ideal para atacarlo antes de programar.

  • Las DevTools del navegador: Chrome trae una emulación de deficiencias visuales en su panel de renderizado, para ver la página ya construida bajo cada tipo de daltonismo.

El flujo sensato es revisar en la etapa de diseño con Stark o Coblis, y verificar la página terminada con Color Oracle o las DevTools antes de publicar. Toma minutos y evita el error más caro: darte cuenta de que un color no se distingue cuando el sitio ya está en producción.

Color y tipografía van de la mano

En la web, el color rara vez trabaja solo: casi siempre es color sobre texto. Por eso las decisiones de color y de tipografía se afectan mutuamente. El mismo gris puede ser legible en un texto grande y en negrita, y volverse ilegible en un cuerpo pequeño y fino, porque el contraste necesario depende del tamaño y el grosor de la letra. Una fuente clara con buen contraste se lee sin esfuerzo; una fuente apretada con un color al límite cansa la vista de cualquiera, daltónico o no.

El ejemplo más típico vuelve a ser el enlace dentro de un párrafo. Si solo se distingue por color, una persona daltónica no lo ve como enlace. Subrayarlo resuelve el problema de raíz y, de paso, lo deja claro para todos.

Diseñar para el margen, mejorar para todos

Volvamos al semáforo. La posición fija del rojo y el verde no solo ayuda a quien es daltónico: también al que mira de noche, al que tiene el sol de frente o al que pasa de prisa. Una segunda señal, además del color, hace el mensaje más claro para cualquiera.

En un sitio web pasa lo mismo. Cuando agregas un ícono al error, subrayas el enlace o etiquetas el gráfico, no estás haciendo una concesión para una minoría: estás haciendo la interfaz más legible para todos. Es la misma idea de la accesibilidad universal, aplicada al color. Elegir colores accesibles no es pintar distinto, es comunicar mejor.