01 Proyectos 02 Conceptos 03 Apps 04 Utilidades 05 GameBob 06 Charlas
volver a utilidades

Simulador Daltonismo

Visualiza tus diseños a través de los ojos de la accesibilidad digital con filtros precisos y comparativa en tiempo real.

Simulador

Selecciona el tipo de daltonismo

Subir Imagen

Haz clic o arrastra una fotografía aquí para comenzar.

Usa el deslizador central para comparar detalles
Estudio de Utilidades

¿Quieres tener esta utilidad en tu web?

Personaliza colores y modo oscuro para WordPress, Notion o tu propio sitio.

Preguntas Frecuentes

¿Qué es el daltonismo o DCV?
La Deficiencia de la Visión Cromática (DCV) es una condición genética que afecta la capacidad de distinguir ciertos colores. No es una ceguera total, sino una alteración en los fotoreceptores de la retina (conos) sensibles al rojo, verde o azul.
¿Qué diferencia hay entre Protanopia y Deuteranopia?
Ambas son formas de daltonismo rojo-verde. La Protanopia es la falta de sensibilidad al rojo, haciendo que los rojos parezcan negros o grises oscuros. La Deuteranopia es la falta de sensibilidad al verde, siendo la forma más común de daltonismo.
¿Por qué los diseñadores deben usar este simulador?
Para asegurar la accesibilidad universal. Si un botón de 'Error' es rojo y uno de 'Éxito' es verde, una persona daltónica los verá iguales. El simulador ayuda a elegir paletas con suficiente contraste de luminosidad, no solo de color.
¿Qué es la Tritanopia?
Es una forma muy rara de daltonismo donde la persona tiene dificultad para distinguir entre el azul y el verde, y entre el amarillo y el violeta. Se debe a la ausencia de fotorreceptores para la luz azul.
Accesibilidad & Diseño

La experiencia cromática: Más allá de lo que asumimos como normal.

El daltonismo, o Deficiencia de la Visión de Color (CVD), afecta a más de 350 millones de personas en todo el mundo.

A diferencia de lo que se cree popularmente, el daltonismo rara vez significa ver en blanco y negro. Es una alteración en la percepción de las longitudes de onda de la luz, causada por la ausencia o el mal funcionamiento de uno o más tipos de conos en la retina. Para un diseñador, desarrollador o creador de contenido, entender esta distorsión no es solo una cuestión de empatía, sino un requisito técnico para la accesibilidad universal.

1 de cada 12 Hombres presenta daltonismo

Arquitectura de la Visión

Protanopia (Rojo-Ciego)

Los individuos con protanopia carecen de conos para longitudes de onda largas (rojo). Esto provoca que los rojos parezcan verdes oscuros o marrones, y que los brillos se perciban de forma atenuada. En el diseño de interfaces, confiar en el color rojo para indicar errores de forma aislada es un fallo crítico para este colectivo.

Deuteranopia (Verde-Ciego)

Es la forma más común de daltonismo. Los conos de longitud media (verde) están ausentes. Los afectados confunden naranjas y rojos con verdes. La distinción entre un botón de "Aceptar" verde y uno de "Cancelar" rojo puede ser imposible si no hay otros indicadores visuales como iconos o bordes.

Tritanopia (Azul-Ciego)

Una condición mucho más rara que afecta a los conos de longitud corta (azul). Los azules parecen verdes, y los amarillos parecen grises o violetas claros. A menudo es una condición adquirida por daños oculares o enfermedades, a diferencia del resto que suelen ser genéticas.

Acromatopsia

La forma más severa, donde el mundo se percibe en escala de grises. Suele ir acompañada de una gran sensibilidad a la luz y baja agudeza visual. Aunque rara, es el recordatorio definitivo de que el brillo y el contraste son los pilares de la accesibilidad, no el color.

Diseñando para el 8%: Manual de Supervivencia Visual

Cuando creamos un producto digital, solemos dar por sentado que el color es un lenguaje universal. Sin embargo, para una facción significativa de la población, el color es un sistema de información ambiguo y, a veces, contradictorio. La simulación en tiempo real que ofrece esta herramienta permite a los creadores "mirar a través de los ojos" de sus usuarios, revelando puntos ciegos en su jerarquía visual.

El daltonismo está ligado principalmente al **cromosoma X**. Dado que los hombres solo tienen uno, si heredan el gen defectuoso, manifestarán la condición. Las mujeres, al tener dos cromosomas X, suelen ser portadoras pero rara vez presentan la deficiencia (0.5%), a menos que ambos cromosomas estén afectados. Esta asimetría estadística hace que sectores como el gaming o el desarrollo de software, históricamente con mayor demografía masculina, tengan una necesidad imperante de implementar modos de daltonismo.

Una de las mejores prácticas es el uso de **pistas redundantes**. Un semáforo, por ejemplo, no solo depende del color, sino de la posición de las luces (vertical u horizontal). En la web, nunca debemos usar color como único medio para comunicar una información importante. Un campo de formulario con error debe tener un icono de advertencia, no solo un borde rojo. Los enlaces deben estar subrayados, no solo en azul.

El Factor Contraste

El contraste de luminancia es el elemento que salva la legibilidad cuando el matiz (hue) desaparece. Las pautas **WCAG 2.1** sugieren un ratio mínimo de 4.5:1 para texto normal. Al aplicar nuestros filtros de simulación, podrás observar cómo combinaciones que parecen vibrantes en visión normal (como rojo sobre verde) se funden en una mancha grisácea ilegible para un daltónico.

Contexto Cultural

Asociamos el rojo al peligro y el verde a la seguridad. Si un daltónico confunde ambos, la carga cognitiva aumenta drásticamente. El usuario tiene que deducir el significado por el contexto o por la lectura del texto, lo que ralentiza la interacción. Un diseño accesible reduce esta fricción eliminando la dependencia emocional del espectro cromático.

Metodología de Simulación

Cómo transformamos los pixeles para recrear la experiencia visual.

Matrices SVG feColorMatrix

Utilizamos modelos matemáticos que recalculan los canales RGB de cada pixel basándose en los estudios de Smith y Wiethoff. Este proceso ocurre íntegramente en el navegador (GPU), garantizando que tus imágenes nunca se suban a ningún servidor externo.

Mantenimiento de Luminancia

A pesar de la alteración del color, el simulador intenta mantener la percepción de brillo relativa para que la comparación por split-view sea lo más fiel posible a la realidad fisiológica del ojo humano.

"El buen diseño es invisible hasta que falla. El diseño accesible es visible para todos, sin importar cómo perciban el espectro."

Referencias Bibliográficas