Daltonismo: Progettare Interfacce di Colore Accessibili

Il daltonismo (deficit della visione dei colori, o CVD) e causato dalla funzione ridotta o assente di uno o piu dei tre tipi di cellule coniche nella retina. Queste cellule fotorecettrici sono responsabili della rilevazione del colore in condizioni di luce diurna.

Come l'occhio rileva il colore

La retina umana contiene tre tipi di cellule coniche, ciascuna sensibile a una diversa gamma di lunghezze d'onda:

• Coni L (Lunghi) — sensibilita massima a ~564 nm (luce rossa). Rilevano le tonalita calde.
• Coni M (Medi) — sensibilita massima a ~534 nm (luce verde). Si sovrappongono significativamente ai coni L, motivo per cui la confusione rosso-verde e cosi comune.
• Coni S (Corti) — sensibilita massima a ~420 nm (luce blu). Molto meno numerosi dei coni L o M.

La percezione del colore nasce dal rapporto dei segnali tra i tre tipi di coni. Quando un tipo e assente o spostato, coppie di colori distinti producono lo stesso rapporto di segnale e diventano indistinguibili.

Pattern ereditario

La maggior parte del daltonismo e recessivo legato all'X. I geni che codificano i fotopigmenti dei coni L e M si trovano sul cromosoma X. Gli uomini (XY) hanno un solo cromosoma X, quindi una singola copia difettosa causa il daltonismo. Le donne (XX) necessitano di copie difettose su entrambi i cromosomi X — rendendole molto meno soggette (0,5% vs 8% negli uomini).

Il deficit della visione dei colori e classificato in base al tipo di cono interessato. La gravita varia dalla tricromazia anomala (sensibilita spostata, lieve) alla dicromazia (tipo di cono assente, grave).

Deuteranopia (deficit verde) — ~5% degli uomini

Il tipo piu comune. I coni M (verdi) sono assenti o con sensibilita spostata. Rossi, verdi e marroni appaiono molto simili — tutti spostati verso il giallo-marrone. Un pulsante verde brillante e uno rosso possono apparire praticamente identici.

Protanopia (deficit rosso) — ~2,5% degli uomini

I coni L (rossi) sono assenti o spostati. Simile alla deuteranopia nei colori confusi, ma i rossi appaiono anche significativamente piu scuri. Un badge di avviso rosso su sfondo scuro puo diventare invisibile.

Tritanopia (blu-giallo) — <0,01%

I coni S (blu) sono assenti o spostati. Blu e verde possono essere confusi; giallo e rosa appaiono simili. Estremamente rara e non legata all'X — colpisce uomini e donne in egual misura.

Monocromatismo — estremamente raro

Assenza completa della funzione di tutti i coni (acromatopsia). Le persone colpite vedono interamente in sfumature di grigio. Molto raro (~1 su 30.000) e spesso accompagnato da estrema sensibilita alla luce.

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

/* Palette accessibile — blu vs arancione + icone */
--status-success: #2563eb;  /* blu */
--status-error: #ea580c;    /* arancione */
/* Accompagnare sempre con forma: icone spunta / X */

Quando il colore e l'unico canale per trasmettere significato, una porzione significativa del tuo pubblico riceve informazioni degradate o nulle.

Anti-pattern comuni

• Stato a semaforo — Indicatori rosso/ambra/verde appaiono identici ai deuteranopi. Tutti e tre collassano in sfumature di marrone-giallo.
• Validazione form solo con colore — Un bordo rosso sui campi non validi e invisibile senza un messaggio di testo o un'icona.
• Grafici a torta con segmenti rossi e verdi — Appaiono come un singolo colore senza etichette o pattern.
• Mappe di calore (gradienti rosso-verde) — Appaiono come un giallo-marrone uniforme.
• Link colorati senza sottolineatura — Se i link si distinguono dal testo solo per colore, i daltonici non possono trovarli.
• Badge colorate senza etichette — "Priorita: Alta" mostrata come un punto rosso non significa nulla se rosso e verde sono uguali.

Esempio negativo: stato solo tramite colore

<!-- Il colore e l'unico segnale -->
<span style="color: red">Errore</span>
<span style="color: green">Successo</span>

<!-- Colore + icona + ARIA -->
<span style="color: #ea580c" role="alert">
  <svg aria-hidden="true">...</svg> Errore
</span>
<span style="color: #2563eb">
  <svg aria-hidden="true">...</svg> Successo
</span>

La seconda versione comunica lo stato attraverso tre canali: colore, forma dell'icona ed etichetta di testo.

Le WCAG 2.1 definiscono rapporti di contrasto minimi per garantire che testo ed elementi UI siano percepibili da utenti con deficit visivi. Il rapporto di contrasto e calcolato dalla luminanza relativa dei due colori.

Soglie di rapporto di contrasto

• AA testo normale — minimo 4,5:1 (testo sotto 18px o 14px bold)
• AA testo grande (18px+) — minimo 3:1
• AA componenti UI e oggetti grafici — minimo 3:1 (bordi, icone, anelli di focus)
• AAA testo normale — minimo 7:1 (livello avanzato)
• AAA testo grande — minimo 4,5:1

La formula del rapporto di contrasto e (L1 + 0.05) / (L2 + 0.05), dove L1 e la luminanza relativa del colore piu chiaro e L2 del piu scuro.

Formula della luminanza relativa

La luminanza relativa si calcola convertendo i valori sRGB in luce lineare, poi ponderando con la sensibilita spettrale dell'occhio: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.

:root {
  /* Conforme WCAG AA — tutti i rapporti verificati */
  --text-primary: #1a1a2e;     /* 15.4:1 su bianco */
  --text-secondary: #4a4a5a;   /* 7.2:1 su bianco */
  --text-link: #1d4ed8;        /* 8.6:1 su bianco */
  --bg-error: #fef2f2;
  --text-error: #991b1b;       /* 12.1:1 su #fef2f2 */
}

1. Non affidarsi mai solo al colore

Ogni informazione trasmessa tramite colore deve avere un segnale ridondante: etichetta di testo, icona, pattern, posizione o forma. I grafici necessitano di pattern o etichette dirette; gli errori dei form necessitano di messaggi di testo.

2. Usare palette sicure per daltonici

Blu e arancione sono distinguibili da praticamente tutti i tipi di visione dei colori. Evita di accoppiare rosso con verde o rosso con marrone. Le palette IBM Design Language e ColorBrewer forniscono set pre-testati.

3. Aggiungere pattern alle visualizzazioni dati

Barre di grafici e fette di torta che differiscono solo per colore sono inaccessibili. Aggiungere righe, punti o tratteggi rende ogni categoria visivamente distinta:

/* Pattern fill per grafici — accessibile senza colore */
.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;
  /* riempimento solido — nessun pattern necessario */
}

4. Supportare modalita ad alto contrasto

Le media query CSS permettono di adattare il design per utenti con scarsa visione:

@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. Testare con utenti reali

Gli strumenti automatizzati rilevano i fallimenti del rapporto di contrasto, ma non possono valutare se l'architettura dell'informazione si basa sul colore. I test di usabilita con partecipanti daltonici rivelano problemi che nessun simulatore puo individuare.

Simulazione nel browser

Chrome DevTools include un simulatore integrato di deficit della visione dei colori. Apri DevTools (F12), premi Ctrl+Shift+P, digita "Rendering", scorri fino a Emulate vision deficiencies e seleziona tra Deuteranopia, Protanopia, Tritanopia, Acromatopsia o Visione sfocata.

Plugin per strumenti di design

• Figma — Integrato: Menu > View > Color blindness simulation. Disponibile anche il plugin "Color Blind".
• Sketch — Il plugin "Stark" offre verifica del contrasto e simulazione di daltonismo direttamente nel canvas.
• Adobe XD — Usa il plugin "Include" o "Stark" per anteprime di accessibilita.

Audit automatizzati

• WAVE — Estensione del browser che segnala errori di contrasto e alt text mancanti direttamente nella pagina.
• axe DevTools — Audit di accessibilita completo integrato in Chrome DevTools.
• Lighthouse — Integrato in Chrome. Esegui un audit Accessibilita dalla tab Lighthouse per un report con punteggio.

Simulazione con filtri CSS

Puoi approssimare la simulazione del daltonismo con filtri CSS usando un feColorMatrix SVG:

/* Simulare deuteranopia con filtro CSS (approssimazione) */
.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");
}

/* Oppure usa Chrome DevTools:
   1. Apri DevTools (F12)
   2. Ctrl+Shift+P → "Rendering"
   3. Scorri a "Emulate vision deficiencies"
   4. Seleziona: Deuteranopia / Protanopia / Tritanopia */

Nota che le matrici dei filtri CSS sono approssimazioni — non replicano perfettamente l'esperienza percettiva del daltonismo. Per test accurati, usa la simulazione di Chrome DevTools o strumenti dedicati come il Simulatore di Daltonismo PixCode.