Il colore è uno degli strumenti più potenti a disposizione di chi progetta: attira l'attenzione, raggruppa gli elementi, comunica stati come errore, successo o avviso. Proprio per questo è rischioso affidargli da solo un'informazione. Una parte non trascurabile della popolazione, soprattutto maschile, ha qualche forma di deficit nella percezione dei colori, e per queste persone un'interfaccia basata solo sul rosso e sul verde può diventare un indovinello.
Le forme più comuni
Il termine «daltonismo» viene usato in senso ampio per indicare diverse condizioni:
- deuteranomalia e deuteranopia: ridotta o assente sensibilità al verde; sono le forme più diffuse;
- protanomalia e protanopia: ridotta o assente sensibilità al rosso, con i rossi che appaiono anche più scuri;
- tritanomalia e tritanopia: difficoltà con il blu e il giallo, molto più rare;
- acromatopsia: visione quasi priva di colori, rarissima.
Nelle forme più comuni la confusione principale riguarda rosso, verde, marrone e arancione, soprattutto a parità di luminosità. Il classico semaforo «rosso = errore, verde = tutto bene» è quindi proprio la combinazione più problematica.
La regola fondamentale: mai solo il colore
Le linee guida WCAG lo esprimono in un criterio di livello A: il colore non deve essere l'unico mezzo visivo per trasmettere un'informazione, indicare un'azione o distinguere un elemento. In pratica, a ogni differenza di colore va affiancato almeno un altro segnale.
| Situazione | Solo colore | Con segnale ridondante |
|---|---|---|
| Campo con errore | Bordo rosso | Bordo rosso, icona e messaggio testuale |
| Link nel testo | Testo blu | Testo blu e sottolineato |
| Stato di un ordine | Pallino verde o rosso | Pallino con etichetta «Spedito» o «Annullato» |
| Linee di un grafico | Linee di colori diversi | Colori diversi, tratteggi e etichette dirette |
La ridondanza non aiuta solo chi è daltonico: aiuta chi guarda uno schermo al sole, chi stampa in bianco e nero, chi usa un monitor con colori mal calibrati.
Il contrasto di luminosità
Due colori molto diversi per tinta possono avere luminosità quasi identica e risultare indistinguibili per chi non percepisce la differenza di tinta. Per questo conta il contrasto di luminosità, misurato dalle WCAG con un rapporto: per il testo normale il minimo di livello AA è 4,5:1, per il testo grande 3:1. Anche i componenti dell'interfaccia e gli elementi grafici necessari per capire il contenuto, come il bordo di un campo o le icone, richiedono almeno 3:1 rispetto agli elementi adiacenti.
Un trucco semplice per verificare se una palette regge è convertirla in scala di grigi: se due stati diventano lo stesso grigio, servono altri segnali o colori con luminosità più distante.
Grafici e visualizzazioni di dati
I grafici sono il terreno più delicato. Alcune pratiche efficaci:
- etichette dirette: scrivere il nome della serie accanto alla linea, invece di affidarsi a una legenda a colori;
- palette pensate per il daltonismo: esistono combinazioni studiate per restare distinguibili nelle forme più comuni, spesso basate su blu e arancione invece che su rosso e verde;
- variare anche luminosità: in una scala sequenziale, il colore dovrebbe passare da chiaro a scuro, non solo cambiare tinta;
- forme e motivi: marcatori diversi per i punti, tratteggi per le linee, trame per le aree;
- limitare le categorie: oltre sei o sette colori distinti, anche chi ha una visione tipica fa fatica.
Stati interattivi
Pulsanti attivi e disattivati, schede selezionate, voci di menu correnti: anche qui il colore da solo non basta. Una scheda selezionata può avere una barra sotto il titolo o un peso diverso del testo; un pulsante disattivato può cambiare anche forma o mostrare un'indicazione testuale del perché non è disponibile.
Come verificare
- Gli strumenti per sviluppatori dei browser principali permettono di simulare diverse forme di deficit cromatico direttamente sulla pagina.
- Esistono estensioni e plugin per i programmi di grafica che mostrano l'anteprima della palette nelle varie condizioni.
- La prova in scala di grigi resta il controllo più rapido.
- Niente sostituisce il riscontro di persone daltoniche reali, magari coinvolte in un test di usabilità.
In sintesi
- Il colore non deve mai essere l'unico modo per comunicare un'informazione.
- Rosso e verde con luminosità simile sono la combinazione più problematica.
- Il contrasto di luminosità conta quanto la differenza di tinta.
- Nei grafici etichette dirette, forme e palette adatte rendono i dati leggibili da tutti.
