Daltonismo en la web: qué significa y cómo diseñar para ello.

¿Qué es el daltonismo?

Vemos los colores gracias a tres tipos de conos en la retina. Cada tipo reacciona a un rango diferente de luz: rojo, verde o azul. Si un tipo de cono funciona con menos eficacia o no funciona en absoluto, las personas perciben ciertos colores de manera diferente.

Estrictamente hablando, existen dos formas:

• Deficiencia de la visión del color: Las personas pueden ver todos los colores, pero perciben algunos con menor intensidad. El rojo y el verde, por ejemplo, se parecen mucho.

• Daltonismo: Las personas no pueden percibir uno o más colores. En la ceguera total al color, llamada acromatopsia, las personas solo ven tonalidades de gris.

En el lenguaje cotidiano, el término "daltonismo" se usa a menudo para referirse a ambos. La mayoría de las personas afectadas tienen una deficiencia en la visión del color, no daltonismo total.

Los tipos más comunes

• Deficiencia rojo-verde: Es, con diferencia, la forma más común. El rojo y el verde son difíciles de distinguir. Según el cono afectado, se denomina protanomalía o protanopia (rojo) y deuteranomalía o deuteranopia (verde).

• Deficiencia azul-amarilla (tritanomalía o tritanopía): Es raro. El azul y el verde, y el amarillo y el rosa, son difíciles de distinguir.

• Ceguera cromática total (acromatopsia): Es muy raro. Las personas afectadas solo ven la luz y la oscuridad, y suelen ser muy sensibles al resplandor.

_{Figura 1: Simulación de diferentes daltonismos. Original (arriba a la izquierda), daltonismo rojo (arriba a la derecha), daltonismo verde (abajo a la izquierda) y daltonismo azul (abajo a la derecha).}

¿Cuántas personas se ven afectadas?

Según el portal del Ministerio Federal de Salud alemán gesund.bund.de Aproximadamente el 8 % de los hombres y el 0,4 % de las mujeres presentan deficiencia en la visión del color. En un equipo de 25 hombres, estadísticamente dos se ven afectados. La ceguera total al color, en cambio, es muy poco común: en Alemania, solo unas 2700 personas la padecen.

Los hombres se ven afectados con mucha más frecuencia porque los genes responsables de los conos rojos y verdes se encuentran en el cromosoma X. Los hombres solo tienen un cromosoma X, por lo que una alteración en este gen tiene un efecto directo. Las mujeres tienen dos cromosomas y, por lo general, son portadoras asintomáticas.

La visión del color también puede cambiar a lo largo de la vida, por ejemplo, debido a enfermedades oculares. Además, muchas personas ven los colores con menos claridad en ciertas situaciones, como al usar el teléfono bajo la luz del sol.

¿Qué elementos de los sitios web causan problemas?

El daltonismo se convierte en una barrera cuando el color es la única forma de transmitir información. Ejemplos típicos:

• Enlaces en el texto corrido: Si los enlaces solo están marcados con color, sin subrayarlos, muchas personas no pueden verlos.

• Mensajes de error y de éxito: Un marco rojo alrededor de un campo de formulario o una marca de verificación verde por sí solos no son suficientes.

• Gráficos y mapas: Las líneas, barras o áreas que solo se diferencian por el color no se pueden distinguir entre sí.

• Visualización del estado: Los indicadores rojos, ámbar y verdes, como los de disponibilidad o estado de entrega, se vuelven poco claros.

• Botones y selecciones: Si el estado activo solo se muestra mediante un cambio de color, los usuarios no saben qué está seleccionado.

• Bajo contraste: El texto gris claro sobre fondo blanco o el texto superpuesto a imágenes es difícil de leer, y no solo para las personas con deficiencia en la visión del color.

• Marcadores de posición en formularios: A menudo, resulta difícil distinguir el texto de marcador de posición de color gris claro del texto que ya se ha introducido.

El problema está muy extendido. Según el WebAIM Million 2026 El 83,9% de las páginas de inicio del millón de sitios web más importantes tenían texto con muy poco contraste.

La figura 2 muestra cómo puede verse un gráfico para una persona con daltonismo verde:

^{Figura 2: A la izquierda, el diagrama sin cambios; a la derecha, con ceguera al verde simulada.}

Lo que requiere WCAG

Las Pautas de Accesibilidad para el Contenido Web (WCAG) contienen tres criterios de éxito que son especialmente importantes para el color:

• 1.4.1 Uso del color (nivel A): El color no debe ser el único medio visual. de transmitir información, indicar una acción o distinguir un elemento.

• 1.4.3 Contraste (Mínimo) (nivel AA): El texto necesita una relación de contraste de al menos 4,5:1 con respecto al fondo, y el texto grande, de al menos 3:1.

• 1.4.11 Contraste no textual (nivel AA): Los botones, los bordes de los campos de formulario, los indicadores de enfoque y los gráficos importantes necesitan una relación de contraste de al menos 3:1.

Estos criterios forman parte de la norma europea EN 301 549, en la que se basa la Ley Europea de Accesibilidad está basado.

Consejos para el diseño web accesible en cuanto al color

1. Nunca uses el color solo: Combina el color con texto, iconos, patrones o subrayados. Un mensaje de error necesita un texto claro, no solo un marco rojo.

2. Subraya los enlaces: Los enlaces en el texto deben estar subrayados o marcados de forma visible.

3. Comprobar el contraste: Utilice un comprobador de contraste para asegurarse de que el texto y los elementos importantes cumplen con los valores de WCAG.

4. Etiquete los gráficos directamente: Escriba etiquetas junto a las líneas y barras en lugar de usar solo una leyenda de color. Los patrones o los diferentes estilos de línea también son útiles.

5. Evite combinaciones de colores críticas: Para muchas personas, es difícil distinguir entre el rojo y el verde, el verde y el marrón, y el azul y el morado.

6. Prueba con una simulación: Muchas herramientas de diseño y herramientas para desarrolladores de navegadores pueden simular diferentes deficiencias en la visión del color. Esto permite ver rápidamente dónde se pierde información.

7. Piensa más allá del daltonismo: Un buen contraste y unas señales claras también ayudan a las personas mayores, a las personas con baja visión y a cualquiera que utilice el teléfono al aire libre.

Nuestra guía para Diseño accesible con WCAG y nuestro artículo sobre formularios en línea accesibles Contiene consejos más prácticos.

Cómo ayuda Eye-Able

El diseño accesible es la base. Además, Asistencia Eye-Able Permite a los visitantes personalizar un sitio web según sus necesidades. Un modo especial ajusta los colores para personas con daltonismo o deficiencia en la visión del color, y el modo de contraste facilita la lectura del texto.

^{Figura 3: Ilustración de la corrección de color mediante imágenes de prueba de Ishihara (Fuente: Colección Wellcome CC BY 4.0)}

La figura 3 muestra cómo el modo de color puede hacer visibles las diferencias en las imágenes de prueba de Ishihara. Aumentar el contraste o la saturación del color también puede ser útil. El semáforo de la figura 4 es otro ejemplo:

^{Figura 4: Semáforo con colores normales (izquierda), semáforo para personas con deficiencia de visión del rojo (centro), semáforo para personas con deficiencia de visión del rojo después de la corrección Eye-Able (derecha).}

Sin embargo, Assist no reemplaza el diseño accesible. Que un sitio web cumpla con los requisitos de contraste de WCAG depende de su diseño e implementación. Con Auditoría e informe de Eye-Able Puedes revisar tu sitio web para detectar errores de contraste y otros problemas, y solucionarlos desde la raíz.

Conclusión

Aproximadamente uno de cada doce hombres tiene deficiencia en la visión del color. Para ellos, la información que se transmite únicamente mediante colores se pierde. La solución es sencilla: nunca utilice solo el color, asegúrese de tener suficiente contraste y pruebe su diseño con una simulación. Esto facilita el uso de los sitios web para todos.

¿Tienes curiosidad por saber cuán accesible es tu propio sitio web? comprobación de accesibilidad gratuita Te ofrece una primera visión general en menos de 2 minutos.

Preguntas frecuentes: daltonismo en internet

¿Qué tan común es el daltonismo?

Alrededor del 8% de los hombres y el 0,4% de las mujeres presentan deficiencia en la visión del color. La forma más común es la deficiencia rojo-verde. El daltonismo total, en el que las personas solo perciben tonalidades de gris, es muy poco frecuente.

¿Cuál es la diferencia entre daltonismo y deficiencia de la visión del color?

Las personas con deficiencia en la visión del color ven todos los colores, pero algunos con menor intensidad. Las personas daltónicas no pueden percibir uno o más colores. En el lenguaje cotidiano, el término «daltonismo» se usa a menudo para referirse a ambos.

¿Qué colores debo evitar para las personas daltónicas?

Evita combinar rojo y verde, verde y marrón, y azul y morado cuando su objetivo sea transmitir una diferencia. Y lo más importante: nunca uses el color como único elemento; siempre añade texto, iconos o patrones.

¿Qué dice WCAG sobre el color?

El criterio de éxito 1.4.1 de WCAG establece que el color no debe ser el único medio para transmitir información. Además, el texto necesita una relación de contraste de al menos 4,5:1 (1.4.3), y los botones, campos de formulario y gráficos importantes necesitan al menos 3:1 (1.4.11).

¿Cómo puedo comprobar si mi sitio web es apto para personas con daltonismo?

Utiliza la simulación de deficiencia de visión cromática en tu herramienta de diseño o en las herramientas para desarrolladores del navegador para ver tu sitio web como lo ven las personas con diferentes tipos de daltonismo. Un comprobador de contraste o una comprobación de accesibilidad automatizada muestra los errores de contraste.