Puntuación de Diferenciación para Daltónicos

Cuantifica qué tan distinguibles son tus colores para personas con diferentes tipos de daltonismo

Puntuación de Diferenciación para Daltónicos

Cuantifica qué tan distinguibles son tus colores para personas con diferentes tipos de deficiencia de visión del color.

Colores a Probar (5)

#E53935
#43A047
#1E88E5
#FDD835
#8E24AA
Puntuación General de Seguridad para Daltónicos
70/100

Tus colores están bien diferenciados para la mayoría de usuarios daltónicos.

Protanopia
Ceguera al rojo (~1% hombres)
100
ΔE Mín: 35.0ΔE Prom: 80.3
Deuteranopia
Ceguera al verde (~6% hombres)
51
ΔE Mín: 12.7ΔE Prom: 82.9
Colores 2 y 5 son muy similares
Tritanopia
Ceguera al azul (~0.01%)
100
ΔE Mín: 25.6ΔE Prom: 61.7
Achromatopsia
Ceguera total al color
11
ΔE Mín: 2.8ΔE Prom: 20.4
Colores 2 y 3 son muy similares

Interpretación de Puntuación

70-100: Seguro
40-69: Precaución
0-39: Peligro

Basado en diferencia de color Delta E (ΔE). ΔE < 5 es apenas perceptible, ΔE > 20 es claramente diferente.

Consejos para Diseño Seguro para Daltónicos

  • • Evita combinaciones rojo-verde (problema más común)
  • • Usa alto contraste entre colores adyacentes
  • • Añade patrones o iconos como indicadores secundarios
  • • Prueba con usuarios reales cuando sea posible

Cómo funciona

La diferenciación de colores para daltónicos va más allá de la simple simulación. Esta herramienta cuantifica numéricamente si tus colores son suficientemente distinguibles para personas con deficiencia de visión del color.

Tipos de daltonismo

  • Protanopia: Ceguera al rojo (~1% de hombres)
  • Deuteranopia: Ceguera al verde (~6% de hombres)
  • Tritanopia: Ceguera al azul (~0.01% de la población)
  • Acromatopsia: Ceguera total al color (muy rara)

¿Qué es Delta E (ΔE)?

Delta E es una métrica que mide la diferencia perceptual entre dos colores. Cuanto mayor sea el valor, más distinguibles son los colores:

  • ΔE < 1: Imperceptible
  • ΔE 1-2: Apenas perceptible
  • ΔE 2-10: Perceptible a simple vista
  • ΔE 11-49: Colores más similares que opuestos
  • ΔE 100: Colores exactamente opuestos

Interpretación de la puntuación

  • 70-100: Seguro - Los colores son claramente distinguibles
  • 40-69: Precaución - Algunos pares pueden confundirse
  • 0-39: Peligro - Muchos colores son indistinguibles

Consejos de diseño

  • Evita combinaciones rojo-verde (el problema más común)
  • Usa alto contraste de luminosidad entre colores adyacentes
  • Añade patrones, iconos o texto como indicadores secundarios
  • Prueba con usuarios reales cuando sea posible

💡 Ejemplos de uso prácticos

Caso 1: Gráfico de barras con 5 categorías

Tienes un gráfico con colores: #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7

→ Puntuación Deuteranopia: 45 ⚠️ Rojo y verde se confunden
→ Solución: Cambia verde por azul oscuro → Puntuación: 78 ✅

Caso 2: Estados de formulario

Usas rojo para error y verde para éxito en validación de campos.

→ Puntuación Protanopia: 28 ❌ Casi indistinguibles
→ Solución: Añade iconos (✓ y ✗) además del color
→ O usa naranja para error y azul para éxito

Caso 3: Mapa de calor

Tu mapa usa gradiente de verde a rojo para mostrar valores.

→ Puntuación general: 35 ❌ Problemático para 8% de hombres
→ Solución: Usa gradiente azul-amarillo o añade etiquetas numéricas
→ Nueva puntuación: 85 ✅

Preguntas Frecuentes

¿Qué porcentaje de la población es daltónica?
Aproximadamente el 8% de los hombres y el 0.5% de las mujeres tienen algún tipo de daltonismo. La deuteranopia (ceguera al verde) es la más común, afectando al 6% de los hombres.
¿Qué puntuación mínima debo buscar?
Para diseño inclusivo, busca una puntuación de 70+ en todos los tipos de daltonismo. Si tu audiencia es general, prioriza deuteranopia y protanopia ya que son las más comunes.
¿Por qué el rojo y verde son problemáticos?
Los conos de rojo y verde en el ojo están muy cerca en el espectro. En personas con protanopia o deuteranopia, estos conos no funcionan correctamente, haciendo que rojo y verde se vean muy similares (generalmente como tonos de marrón o amarillo).
¿Cómo puedo hacer mi diseño más accesible?
Nunca uses solo el color para transmitir información. Añade iconos, patrones, etiquetas de texto o diferencias de forma. Asegúrate de que haya suficiente contraste de luminosidad entre colores adyacentes.
¿Esta herramienta reemplaza las pruebas con usuarios reales?
No, pero es un excelente primer paso. La herramienta te da una evaluación cuantitativa rápida, pero siempre es recomendable probar con usuarios daltónicos reales cuando sea posible.