Daltonismo

¿Qué es el daltonismo?

El daltonismo (también llamado deficiencia de visión del color) es una condición que afecta la capacidad de una persona para distinguir ciertos colores. La forma más común es la dificultad para distinguir entre rojo y verde, aunque también existen otros tipos.

Tipos de daltonismo

1. Deuteranopia/Deuteranomalía: Dificultad con verde (más común)
2. Protanopia/Protanomalía: Dificultad con rojo
3. Tritanopia/Tritanomalía: Dificultad con azul (menos común)
4. Acromatopsia: Incapacidad total de ver colores (muy raro)

Relación con WCAG 2.1

El Criterio 1.4.1 (Uso del Color) de WCAG 2.1 Nivel A prohíbe usar el color como el único medio visual para transmitir información, indicar una acción, provocar una respuesta o distinguir un elemento visual.

Ejemplos prácticos

✅ Correcto: Color + texto/icono

<!-- Usar color + texto para indicar estado -->
<span class="error">
  <span class="icono-error" aria-hidden="true">⚠</span>
  <span class="texto-error">Error: Campo requerido</span>
</span>

<style>
  .error {
    color: red;
    font-weight: bold;
  }
</style>

✅ Correcto: Color + patrón/forma

<!-- Gráfico accesible con color + patrón -->
<svg>
  <rect fill="red" stroke="black" stroke-width="2" pattern="diagonal">
  <rect fill="green" stroke="black" stroke-width="2" pattern="dots">
</svg>

❌ Incorrecto: Solo color

<!-- Error: Solo usa color para indicar estado -->
<span style="color: red;">Campo inválido</span>

<!-- Error: Enlace solo distinguible por color -->
<p>Haz <a href="#" style="color: blue;">clic aquí</a> para continuar</p>

❌ Incorrecto: Gráfico solo con color

<!-- Gráfico donde solo el color diferencia las barras -->
<div class="grafico">
  <div style="background: red;">Serie 1</div>
  <div style="background: green;">Serie 2</div>
</div>

Errores comunes

1. Usar solo color rojo/verde: Los tipos más comunes de daltonismo afectan estos colores
2. Gráficos sin etiquetas: Confiar solo en leyendas de color
3. Enlaces solo por color: No usar subrayado u otro indicador visual
4. Formularios con validación solo por color: Añadir iconos o texto
5. Mapas de calor solo con color: Usar patrones o texturas adicionales

Buenas prácticas

• Combinar color con otros indicadores: Texto, iconos, formas, patrones
• Usar herramientas de simulación: Probar con simuladores de daltonismo
• Alto contraste: Asegurar buen contraste incluso sin distinguir colores
• Etiquetas en gráficos: Etiquetar directamente los elementos, no solo usar leyenda
• Probar con usuarios: La mejor forma de verificar accesibilidad

Herramientas de simulación

• Color Oracle: Simulador de daltonismo para escritorio
• Chrome DevTools: Emulación de deficiencias de visión del color
• WebAIM Color Contrast Checker: Verifica contraste y simula daltonismo

Términos relacionados

• [[Contraste de color]]
• [[Uso del color]]
• [[WCAG 2.1]]
• [[Criterio 1.4.1]]
• [[Baja visión]]