Simulador de Daltonismo

Simulador de Daltonismo - Herramienta de Prueba de Accesibilidad Web

Un simulador completo de daltonismo que muestra cómo se ve tu sitio web, imágenes o paletas de colores para personas con varios tipos de deficiencias de visión de color (CVD). Prueba para protanopía (ciego al rojo), deuteranopía (ciego al verde), tritanopía (ciego al azul) y daltonismo completo. Esencial para diseñadores y desarrolladores que crean contenido web accesible que funciona para todos, incluido el 8% de hombres y 0.5% de mujeres con alguna forma de daltonismo.

¿Qué es el daltonismo y a quién afecta?

El daltonismo, o Deficiencia de Visión de Color (CVD), es una condición donde las personas no pueden distinguir ciertos colores o ven los colores de manera diferente a aquellos con visión de color normal.

Prevalencia:
- 8% de hombres (1 de cada 12)
- 0.5% de mujeres (1 de cada 200)
- Más común: Deuteranomalía (débil al verde)
- Alrededor de 300 millones de personas en todo el mundo

Tipos de Daltonismo:

Daltonismo Rojo-Verde (Más Común):

Protanopía (Ciego al Rojo):
- Faltan conos rojos
- El rojo aparece como gris oscuro o negro
- Naranja y amarillo aparecen como amarillo
- El púrpura se ve como azul
- Afecta a aproximadamente el 1% de los hombres

Protanomalía (Débil al Rojo):
- Función reducida de conos rojos
- Rojo, naranja, amarillo aparecen más verdes
- Menos severo que la protanopía
- Afecta a aproximadamente el 1% de los hombres

Deuteranopía (Ciego al Verde):
- Faltan conos verdes
- El verde aparece beige
- El rojo aparece amarillo parduzco
- Confusión similar a la protanopía
- Afecta a aproximadamente el 1% de los hombres

Deuteranomalía (Débil al Verde):
- Función reducida de conos verdes
- Forma más común (5% de hombres)
- Verde y rojo aparecen similares
- Pueden adaptarse mejor que otros

Por Qué Importa para el Diseño:
- No se puede confiar solo en el color para información
- Las combinaciones rojo y verde son problemáticas
- Se necesita contraste suficiente
- Las etiquetas de texto son esenciales
- Los iconos y patrones ayudan a diferenciar

¿Cómo uso el simulador de daltonismo?

Tres formas de probar tus diseños:

1. Método de Subir Imagen (Recomendado):
- Toma captura de pantalla de tu sitio web
- Haz clic en la pestaña Subir Imagen
- Arrastra y suelta o elige archivo
- Selecciona el tipo de daltonismo
- Ve el resultado simulado
- Usa Comparar Todo para ver todos los tipos

2. Método de Paleta de Colores:
- Haz clic en la pestaña Paleta de Colores
- Ve la cuadrícula de colores predeterminada
- Agrega tus colores de marca
- Haz clic en cualquier color para editar
- Selecciona el tipo de daltonismo
- Ve cómo aparecen los colores

Proceso de Prueba:

Paso 1 - Elige Entrada:
- Captura de pantalla: Mejor para páginas completas
- Imagen: Buena para gráficos o logotipos
- Paleta: Verificaciones rápidas de color

Paso 2 - Selecciona Tipo:
- Comienza con deuteranomalía (más común)
- Prueba protanopía (ciego al rojo)
- Verifica tritanopía (azul-amarillo)
- Prueba acromatopsia (escala de grises)

Qué Buscar:
- ¿Puedes leer el texto?
- ¿Los botones son distinguibles?
- ¿Los gráficos tienen sentido?
- ¿Las advertencias son visibles?

¿Cómo puedo hacer mi diseño accesible para usuarios daltónicos?

Estrategias completas para diseño accesible al daltonismo:

1. Nunca Uses Solo Color:

Agrega Indicadores Visuales:
- Iconos con colores (no solo color)
- Patrones o texturas en gráficos
- Etiquetas de texto en todas partes
- Diferencias de forma
- Bordes o contornos

Ejemplos:
Bueno: Icono de error rojo + Texto de error + Icono X
Malo: Solo fondo rojo

2. Usa Alto Contraste:

Contraste de Texto:
- 4.5:1 mínimo para texto normal
- 3:1 mínimo para texto grande
- Funciona para todos los tipos de daltonismo

Combinaciones de Colores Seguras:
- Negro y blanco (siempre funciona)
- Azul y naranja
- Azul y amarillo
- Negro y amarillo
- Blanco y azul oscuro

¿Cuáles son los diferentes tipos de daltonismo?

Desglose detallado de todas las deficiencias de visión de color:

Daltonismo Rojo-Verde (Más Común):
Afecta la capacidad de distinguir rojo y verde
Hereditario, recesivo ligado al X
Alrededor del 8% de hombres, 0.5% de mujeres

Protanopía (Ciego al Rojo):
- Faltan conos L (receptores rojos)
- El rojo aparece como gris oscuro o negro
- La luz roja parece tenue o ausente
- El naranja aparece amarillo
- Afecta a aproximadamente el 1% de los hombres

Daltonismo Azul-Amarillo (Raro):
Achromatopsia (Total):
- Sin conos funcionales
- Visión en escala de grises completa
- Ve solo negro, blanco, gris
- Sensibilidad severa a la luz
- Afecta a aproximadamente el 0.003%

¿Qué tan preciso es este simulador?

Entendiendo la precisión y limitaciones del simulador:

Nivel de Precisión:

Bueno Para:
- Comprensión general de CVD
- Identificar problemas importantes
- Probar combinaciones de colores
- Toma de decisiones de diseño
- Educación del equipo

No Perfecto:
- Existe variación individual
- La calibración de pantalla afecta los resultados
- Las condiciones de iluminación importan
- No puede replicar la percepción exacta
- Modelos matemáticos simplificados

Cómo Funciona la Simulación:
- Transformación de matriz de color
- Modelo matemático de pérdida de conos
- Se aplica a valores RGB
- Basado en estudios de investigación
- Método de Brettel, Mollon y Vienot

Línea Final:
- El simulador es una herramienta útil
- No es un reemplazo para pruebas reales
- Bueno para detectar problemas obvios
- Valida decisiones de diseño

¿Por qué la deuteranomalía es la deficiencia visual cromática más común?

La deuteranomalía (verde-débil) afecta ~5% de hombres porque el gen OPN1MW del cono de longitud media está en el cromosoma X. Hombres tienen una X, mujeres dos — así una mutación recesiva produce CVD en hombres. El cluster del gen del cono verde es la mayor zona de mutación del genoma humano por errores de conversión génica entre copias OPN1MW/LW adyacentes.

¿Qué combinaciones rojo-verde son las peores para usuarios CVD?

Texto rojo sobre verde, check verde vs X roja sin iconos, semáforo (rojo malo / verde bueno) sin etiquetas, bordes rojos de error en blanco que parecen grises para deuteranopes. Lo peor: pie charts rojo-verde. Empareja siempre color con forma, icono, texto o patrón — WCAG 2.2 Success Criterion 1.4.1 lo exige.

¿Qué tan preciso es el simulador del navegador vs la experiencia CVD real?

La transformación matricial Brettel-Mollon-Vienot 1997 es el estándar académico de referencia y da resultados dentro del ~5-10% de cómo dicrómatas perciben colores. Sin embargo, usuarios CVD reales tienen adaptación cerebral de por vida — decodifican pistas contextuales no simulables. Usa esto como primer chequeo, luego prueba con usuarios CVD reales para producción.

¿Las paletas seguras para daltónicos como Viridis funcionan para todos?

Sí. Viridis (usada en Python matplotlib desde 2015) fue diseñada para ser monotónicamente creciente en luminancia Y distinguible en todos los tipos de CVD. Supera Jet/Rainbow que son ininteligibles en deuteranopia. Para colores categóricos usa ColorBrewer Set2, Okabe-Ito 8 colores o la paleta accesible IBM Carbon. Confirma en este simulador.

¿Mi par de colores sigue aprobando el contraste WCAG para usuarios daltónicos?

Usa el Verificador de Contraste WCAG integrado: ingresa un color de primer plano (texto) y un color de fondo, luego lee la relación.

Umbrales WCAG 2.2 (SC 1.4.3 / 1.4.6):
- AA texto normal: mínimo 4.5:1
- AAA texto normal: mínimo 7:1
- AA texto grande (18pt / 14pt negrita): mínimo 3:1

La relación se calcula a partir de la luminancia relativa sRGB, la misma matemática que usan los navegadores y las herramientas de auditoría, así que coincide con DevTools y Lighthouse.

Por qué importa la relación ajustada por DVC:

La relación de contraste se basa en luminancia, así que un par rojo sobre verde puede aprobar técnicamente siendo casi invisible para un deuteranope porque ambos colores colapsan hacia el mismo tono. Esta herramienta también informa una relación ajustada por DVC: transforma AMBOS colores a través de la matriz de daltonismo seleccionada y recalcula el contraste. Si la relación ajustada cae muy por debajo de la de visión normal, el par depende del tono en lugar de la luminancia y fallará con usuarios reales aunque la prueba estándar apruebe.

Para entregables de auditoría (Sección 508, VPAT, informes de conformidad WCAG 2.2), registra tanto la relación de visión normal como la ajustada por DVC de cada par crítico, y captura la simulación lado a lado como evidencia. Combina siempre el color con texto, icono o forma (SC 1.4.1) para que el significado nunca dependa solo del tono.

Características Clave

• Simular 9 tipos de deficiencia de visión de color
• Simulación de protanopía (ciego al rojo)
• Simulación de deuteranopía (ciego al verde)
• Simulación de tritanopía (ciego al azul)
• Simulación de acromatopsia (daltonismo total)
• Subir y probar imágenes
• Probar paletas de colores personalizadas
• Transformación de color en tiempo real
• Vista de comparación lado a lado
• Comparar todos los tipos de CVD a la vez
• Descargar imágenes simuladas
• Subida de imagen de arrastrar y soltar
• Algoritmos precisos de matriz de color
• Basado en investigación científica
• Procesamiento 100% del lado del cliente
• Sin datos enviados a servidores
• Uso gratuito e ilimitado