Progettare per il daltonismo: guida completa

Circa 300 milioni di persone nel mondo hanno una qualche forma di deficit della visione dei colori. Se il tuo sito, la tua app o la tua visualizzazione di dati affida al solo colore il compito di comunicare, una quota consistente del pubblico farà fatica a usarli.

La buona notizia: progettare tenendo conto del daltonismo giova a tutti. Scelte cromatiche accessibili migliorano chiarezza, leggibilità e usabilità per ogni utente, indipendentemente dalla presenza di un deficit.

Perché conta

Il deficit della visione dei colori riguarda circa l’8% degli uomini e lo 0,5% delle donne. In pratica significa che:

In un gruppo di 20 uomini, circa 1-2 ne sono interessati
In un pubblico di un milione di persone, circa 80.000 uomini hanno una forma di deficit rosso-verde
La confusione rosso-verde è la forma più comune e riguarda ~98% dei casi

Progettare per il daltonismo è sempre più anche un obbligo normativo. Le Linee guida per l’accessibilità dei contenuti web (WCAG) 2.1 richiedono esplicitamente che l’informazione veicolata con il colore sia disponibile anche in altro modo.

La regola d’oro: mai affidarsi al solo colore

Il principio più importante di un design attento al daltonismo è semplice:

Non usare mai il colore come unico mezzo per veicolare informazione.

Abbina sempre il colore ad almeno un altro segnale visivo:

Etichette testuali — nomina esplicitamente la categoria o lo stato
Icone o simboli — usa forme indipendenti dal colore
Pattern o texture — particolarmente utili in grafici e mappe
Posizione — usa la disposizione spaziale per comunicare gerarchia
Forma — usa forme diverse per categorie di dati diverse

Evita le combinazioni problematiche

Alcune coppie di colori sono particolarmente difficili per chi ha un deficit rosso-verde:

Combinazioni ad alto rischio da evitare

Evita	Perché	Alternativa
Rosso su verde	Del tutto invisibile con deuteranopia	Blu su arancione
Verde su rosso	Stesso problema	Giallo su blu
Pulsanti rossi e verdi	Non si distingue esito positivo da negativo	Aggiungi icone (✓/✗) e testo
Testo rosso e nero	Il rosso può apparire grigio scuro	Usa grassetto o sottolineatura per enfatizzare
Rosa e grigio	Identici con protanopia	Usa blu e grigio

Combinazioni più sicure

Per chi ha un deficit rosso-verde, blu e arancione è la coppia accessibile più affidabile: queste tonalità restano distinte in quasi tutti i tipi di deficit.

Altre coppie sicure:

Blu + giallo (ottima sia per i deficit rosso-verde sia per quelli blu-giallo)
Blu + bianco
Nero + giallo (contrasto massimo)
Viola + giallo

Grafici accessibili alle persone daltoniche

La visualizzazione dei dati è l’ambito in cui il daltonismo pesa di più. Errori comuni:

Usare rosso/verde per valori positivi e negativi
Usare mappe di calore con gradienti rosso-giallo-verde
Distinguere più serie di dati solo con il colore

Soluzioni per i grafici

1. Usa riempimenti a pattern insieme ai colori Aggiungi tratteggi, punti o retini alle aree del grafico, così restano distinguibili anche se i colori sembrano simili.

2. Etichetta i dati direttamente Invece di affidarti a una legenda cromatica, etichetta le serie direttamente sul grafico. Aiuta tutti, non solo chi è daltonico.

3. Usa una palette adatta Palette accessibili consigliate:

Palette Okabe-Ito: pensata specificamente per l’accessibilità nelle figure scientifiche
Palette ColorBrewer: palette basate sulla ricerca per mappe e grafici
Usa il nostro simulatore di daltonismo per verificare che i grafici restino distinguibili in simulazione

4. Offri formati alternativi dei dati Affianca a ogni grafico una vista tabellare o il download dei dati, così chi fatica con la rappresentazione visiva può comunque accedere alle informazioni.

Moduli e stati dell’interfaccia

I moduli sono un ambito ad alto rischio, perché gli indicatori di stato si affidano spesso al colore:

Problemi comuni

Bordo rosso sui campi non validi e verde su quelli validi
“Stato: attivo” mostrato solo con testo verde
Messaggi di errore mostrati solo in rosso

Alternative accessibili

Stati di validazione:

❌ Non fare: bordo rosso = errore, bordo verde = successo
✅ Fai:      icona di errore (⚠) + bordo rosso + testo che descrive l’errore
             icona di conferma (✓) + bordo verde + testo "Tutto corretto!"

Indicatori di stato:

❌ Non fare: • (punto verde) = Online, • (punto rosso) = Offline
✅ Fai:      ✓ Online, ✗ Offline (oppure forme diverse: ●/○)

Pulsanti e call to action:

❌ Non fare: "Conferma" verde / "Annulla" rosso — identici con protanopia
✅ Fai:      etichetta chiaramente i pulsanti + assicura contrasto sufficiente + aggiungi icone

Requisiti di contrasto (WCAG)

Oltre alla scelta dei colori, un rapporto di contrasto sufficiente è essenziale per la leggibilità. Usa il nostro verificatore di contrasto per controllare le combinazioni.

Requisito	Rapporto minimo	Contesto
WCAG AA	4,5:1	Testo normale (sotto i 18pt)
WCAG AA	3,0:1	Testo grande (18pt+ o 14pt in grassetto)
WCAG AAA	7,0:1	Livello avanzato — testo normale
WCAG AAA	4,5:1	Livello avanzato — testo grande

Importante: questi rapporti si misurano tra la luminanza del testo e quella dello sfondo e vanno rispettati per tutti i profili di utenza, anche in simulazione di deficit cromatico.

Testare i progetti

Verifica sempre i tuoi progetti con più metodi:

1. Usa un simulatore

Carica screenshot nel simulatore ColorVision per vedere come appaiono con ciascun tipo di deficit. Prova tutti e quattro: protanopia, deuteranopia, tritanopia e acromatopsia.

2. Usa i DevTools del browser

Chrome e Firefox hanno una simulazione integrata:

Chrome: DevTools → Rendering → Emulate vision deficiencies
Firefox: DevTools → Accessibility → Simulate

3. Verifica i rapporti di contrasto

Passa ogni combinazione testo/sfondo in un verificatore di contrasto che mostri anche la simulazione.

4. Raccogli riscontri reali

Se possibile, fai provare l’interfaccia a persone daltoniche. Spesso individuano problemi che le simulazioni non rivelano.

Consigli per piattaforma

Design web

Usa il CSS per aggiungere attributi aria-label e title agli elementi codificati a colori
Non definire lo stato :focus solo con il colore
Assicurati che gli stati di errore nei moduli includano icona + testo, non solo un cambio di colore

Data science e ricerca

Imposta la palette Okabe-Ito come predefinita in R, Python (matplotlib) o in qualsiasi libreria grafica
Includi sempre una legenda con etichette testuali, anche se i colori sembrano evidenti

App mobili

iOS e Android supportano la simulazione nelle impostazioni di accessibilità
Prova la tua app con queste impostazioni attive prima di ogni release importante

Stampa

Non affidarti alla metafora del semaforo rosso/verde per gli stati
Assicurati che le infografiche restino comprensibili fotocopiate in bianco e nero

Strumenti consigliati

Strumento	Scopo
Simulatore ColorVision	Simula come appare un’immagine con un deficit cromatico
Verificatore di contrasto	Verifica la conformità WCAG con anteprima in simulazione
Colour Oracle (app desktop)	Livello di simulazione su tutto il sistema
Who Can Use	Simula i rapporti di contrasto per diverse disabilità
Plugin di accessibilità per Figma	Controlli in tempo reale in Figma

Domande frequenti

Rendere accessibile un design significa eliminare il colore? No. Il colore può ancora essere usato ampiamente: semplicemente non può essere l’unico modo di veicolare l’informazione. Aggiungi segnali secondari (testo, icone, pattern) accanto al colore.

Devo progettare solo per il deficit rosso-verde? Il deficit rosso-verde copre ~98% dei casi, ma progettare per esso tende ad aiutare anche gli altri. L’approccio più inclusivo è testare tutti i tipi con un simulatore.

Le persone daltoniche usano gli screen reader? Non necessariamente. Il deficit cromatico è diverso dalla cecità. Chi ne è interessato ha in genere piena acuità visiva e non usa screen reader: ha bisogno di segnali visivi indipendenti dal colore, non di testo alternativo.

Qual è il miglior strumento gratuito per verificare l’accessibilità cromatica? Il simulatore e il verificatore di contrasto di questo sito sono completamente gratuiti. Per Figma, il plugin gratuito “Able” offre la verifica del contrasto in tempo reale.

Risposta rapida