Daltonismo: Disenando Interfaces de Color Accesibles

El daltonismo (deficiencia de la vision del color, o CVD) es causado por una funcion reducida o ausente de uno o mas de los tres tipos de celulas cono en la retina. Estas celulas fotorreceptoras son responsables de detectar el color en condiciones de luz diurna.

Como el ojo detecta el color

La retina humana contiene tres tipos de celulas cono, cada una sensible a un rango diferente de longitudes de onda:

• Conos L (Largos) — sensibilidad maxima a ~564 nm (luz roja). Detectan tonos calidos.
• Conos M (Medios) — sensibilidad maxima a ~534 nm (luz verde). Se superponen significativamente con los conos L, por lo que la confusion rojo-verde es tan comun.
• Conos S (Cortos) — sensibilidad maxima a ~420 nm (luz azul). Mucho menos numerosos que los conos L o M.

La percepcion del color surge de la proporcion de senales entre los tres tipos de conos. Cuando un tipo esta ausente o desplazado, ciertos pares de colores producen la misma proporcion de senal y se vuelven indistinguibles.

Patron de herencia

La mayoria del daltonismo es recesivo ligado al X. Los genes que codifican los fotopigmentos de los conos L y M estan en el cromosoma X. Los hombres (XY) tienen solo un cromosoma X, por lo que una sola copia defectuosa causa daltonismo. Las mujeres (XX) necesitan copias defectuosas en ambos cromosomas X — haciendolas mucho menos propensas (0,5% vs 8% en hombres).

La deficiencia de vision del color se clasifica segun el tipo de cono afectado. La gravedad varia desde la tricromatismo anomalo (sensibilidad desplazada, leve) hasta la dicromatismo (tipo de cono ausente, severo).

Deuteranopia (debilidad verde) — ~5% de los hombres

El tipo mas comun. Los conos M (verde) estan ausentes o con sensibilidad desplazada. Rojos, verdes y marrones parecen muy similares — todos desplazados hacia amarillo-marron.

Protanopia (debilidad roja) — ~2,5% de los hombres

Los conos L (rojo) estan ausentes o desplazados. Similar a la deuteranopia en los colores confundidos, pero los rojos tambien aparecen significativamente mas oscuros.

Tritanopia (azul-amarillo) — <0,01%

Los conos S (azul) estan ausentes o desplazados. Azul y verde pueden confundirse; amarillo y rosa parecen similares. Extremadamente rara y no ligada al X.

Monocromatismo — extremadamente raro

Ausencia completa de toda funcion de conos (acromatopsia). Las personas afectadas ven enteramente en tonos de gris. Muy raro (~1 en 30.000).

/* Paleta problematica — rojo vs verde */
--status-success: #22c55e;
--status-error: #ef4444;

/* Paleta accesible — azul vs naranja + iconos */
--status-success: #2563eb;  /* azul */
--status-error: #ea580c;    /* naranja */
/* Siempre acompanar con forma: iconos check / X */

Cuando el color es el unico canal para transmitir significado, una porcion significativa de tu audiencia recibe informacion degradada o nula.

Anti-patrones comunes

• Estado semaforo — Indicadores rojo/ambar/verde parecen identicos a los deuteranopes.
• Validacion de formulario solo con color — Un borde rojo en campos invalidos es invisible sin mensaje de texto o icono.
• Graficos circulares con segmentos rojos y verdes — Aparecen como un solo color sin etiquetas o patrones.
• Mapas de calor (gradientes rojo-verde) — Aparecen como un amarillo-marron uniforme.
• Enlaces coloreados sin subrayado — Si los enlaces solo se distinguen del texto por color, los daltonicos no pueden encontrarlos.
• Insignias de color sin etiquetas — "Prioridad: Alta" como un punto rojo no significa nada si rojo y verde son iguales.

Ejemplo negativo: estado solo por color

<!-- El color es la unica senal -->
<span style="color: red">Error</span>
<span style="color: green">Exito</span>

<!-- Color + icono + ARIA -->
<span style="color: #ea580c" role="alert">
  <svg aria-hidden="true">...</svg> Error
</span>
<span style="color: #2563eb">
  <svg aria-hidden="true">...</svg> Exito
</span>

La segunda version comunica el estado a traves de tres canales: color, forma del icono y etiqueta de texto.

Las WCAG 2.1 definen proporciones de contraste minimas para garantizar que texto y elementos UI sean perceptibles por usuarios con deficiencias visuales.

Umbrales de proporcion de contraste

• AA texto normal — minimo 4,5:1 (texto menor de 18px o 14px negrita)
• AA texto grande (18px+) — minimo 3:1
• AA componentes UI y objetos graficos — minimo 3:1
• AAA texto normal — minimo 7:1 (nivel avanzado)
• AAA texto grande — minimo 4,5:1

La formula: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color mas claro y L2 del mas oscuro.

Formula de luminancia relativa

La luminancia relativa se calcula convirtiendo valores sRGB a luz lineal: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.

:root {
  /* Conforme WCAG AA — todas las proporciones verificadas */
  --text-primary: #1a1a2e;     /* 15.4:1 sobre blanco */
  --text-secondary: #4a4a5a;   /* 7.2:1 sobre blanco */
  --text-link: #1d4ed8;        /* 8.6:1 sobre blanco */
  --bg-error: #fef2f2;
  --text-error: #991b1b;       /* 12.1:1 sobre #fef2f2 */
}

1. Nunca depender solo del color

Cada informacion transmitida por color debe tener una senal redundante: etiqueta de texto, icono, patron, posicion o forma.

2. Usar paletas seguras para daltonicos

Azul y naranja son distinguibles por practicamente todos los tipos de vision del color. Evita emparejar rojo con verde. Las paletas IBM Design Language y ColorBrewer proporcionan conjuntos pre-probados.

3. Agregar patrones a las visualizaciones de datos

Barras de graficos y porciones de torta que difieren solo por color son inaccesibles:

/* Relleno de patron para graficos */
.bar-a {
  background: #2563eb;
  background-image: repeating-linear-gradient(
    45deg, transparent, transparent 4px,
    rgba(255,255,255,0.3) 4px, rgba(255,255,255,0.3) 8px
  );
}
.bar-b {
  background: #ea580c;
}

4. Soportar modos de alto contraste

Las media queries CSS permiten adaptar el diseno:

@media (prefers-contrast: more) {
  :root {
    --border-color: #000;
    --text-muted: #333;
    --focus-ring: 3px solid #000;
  }
}

@media (forced-colors: active) {
  .btn {
    border: 2px solid ButtonText;
  }
}

5. Probar con usuarios reales

Las herramientas automatizadas detectan fallos de proporcion de contraste, pero no pueden evaluar si la arquitectura de informacion depende del color.

Simulacion en el navegador

Chrome DevTools incluye un simulador integrado de deficiencia de vision del color. Abre DevTools (F12), presiona Ctrl+Shift+P, escribe "Rendering", desplazate hasta Emulate vision deficiencies y selecciona entre Deuteranopia, Protanopia, Tritanopia, Acromatopsia o Vision borrosa.

Plugins para herramientas de diseno

• Figma — Integrado: Menu > View > Color blindness simulation. Tambien disponible el plugin "Color Blind".
• Sketch — El plugin "Stark" ofrece verificacion de contraste y simulacion de daltonismo.
• Adobe XD — Usa el plugin "Include" o "Stark" para vistas previas de accesibilidad.

Auditorias automatizadas

• WAVE — Extension del navegador que senala errores de contraste y texto alt faltante.
• axe DevTools — Auditoria de accesibilidad completa integrada en Chrome DevTools.
• Lighthouse — Integrado en Chrome. Ejecuta una auditoria de Accesibilidad desde la pestana Lighthouse.

Simulacion con filtros CSS

Puedes aproximar la simulacion de daltonismo con filtros CSS usando un feColorMatrix SVG:

/* Simular deuteranopia con filtro CSS (aproximacion) */
.simulate-deuteranopia {
  filter: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='d'><feColorMatrix values='0.625 0.375 0 0 0 0.7 0.3 0 0 0 0 0.3 0.7 0 0 0 0 0 1 0'/></filter></svg>#d");
}

/* O usa Chrome DevTools:
   1. Abre DevTools (F12)
   2. Ctrl+Shift+P → "Rendering"
   3. Desplazate a "Emulate vision deficiencies"
   4. Selecciona: Deuteranopia / Protanopia / Tritanopia */

Ten en cuenta que las matrices de filtros CSS son aproximaciones. Para pruebas precisas, usa la simulacion de Chrome DevTools o herramientas dedicadas como el Simulador de Daltonismo PixCode.