Palette per daltonici: colori accessibili e come testarli

Una palette per daltonici è un insieme di colori che restano distinti per chi confonde certe tonalità, di solito rossi e verdi. Il trucco è separare i colori per luminosità oltre che per tonalità, e non lasciare mai il colore come unico segnale. Un blu scuro e un arancione chiaro restano diversi per quasi tutti; un rosso medio e un verde medio, con luminosità simile, possono sembrare lo stesso marrone spento. Qui sotto trovi palette da copiare, le coppie da evitare e tre modi gratuiti per testare il tuo lavoro.

I tipi di daltonismo, in breve

La visione dei colori dipende da tre tipi di coni nell'occhio, sintonizzati grosso modo su lunghezze d'onda lunghe, medie e corte. Quando un tipo manca o è spostato, alcuni colori che alla maggior parte delle persone sembrano diversi iniziano ad assomigliarsi. L'articolo di WebAIM sul daltonismo spiega la biologia; per chi progetta, conta questa tabella.

Il filo comune: la tonalità diventa inaffidabile, ma la luminosità resiste. Chi ha la deuteranopia vede ancora chiaramente che un colore è più scuro di un altro. Questo solo fatto guida ogni regola che segue.

Una palette per daltonici da copiare

L'insieme sicuro più noto è la palette proposta da Masataka Okabe e Kei Ito per le figure scientifiche. I suoi otto colori sono stati scelti per restare distinguibili nei tipi più comuni di daltonismo, e funziona altrettanto bene per grafici, mappe, etichette e colori di stato in un prodotto.

Per il lavoro sul brand, otto colori sono di solito troppi. L'accoppiata singola più sicura è blu e arancione: stanno ai lati opposti della linea di confusione tra rosso e verde e differiscono per luminosità, quindi appaiono diversi a quasi tutti. Reggono bene anche blu con giallo e viola scuro con verde chiaro.

Sfumature e scale per i dati

Per mappe di calore e grafici che mostrano un intervallo, usa una scala la cui luminosità cambia con regolarità da un capo all'altro. Una scala dal rosso al verde sbaglia due volte: gli estremi si confondono per chi è daltonico ed entrambi hanno luminosità simile. Dal blu all'arancione, o una sola tonalità dal scuro al chiaro, funziona per quasi tutti.

Coppie da evitare e cosa usare al loro posto

Alcune combinazioni creano problemi di continuo. Il rosso #d7263d e il verde #2e9e44 qui sopra sembrano chiaramente diversi alla maggior parte delle persone, ma la loro luminosità percepita è quasi identica (circa 57% e 62% in OKLCH), quindi per chi ha la deuteranopia resta poco per distinguerli.

Se i colori del tuo brand sono rosso e verde, non devi cambiarli. Basta che uno sia nettamente più scuro dell'altro, e che non siano mai l'unica differenza tra, per esempio, un guadagno e una perdita. Una freccia o un segno più e meno risolve il problema per tutti. Come scegliere i colori in partenza lo trovi in come scegliere i colori del brand.

Non affidarti mai al solo colore

Questa è la regola che conta di più, ed è anche parte delle Web Content Accessibility Guidelines. Se la legenda di un grafico, un errore in un modulo, un'etichetta «disponibile» o una mappa si distinguono solo per colore, alcuni lettori perdono il significato. Aggiungi un secondo segnale:

• Etichette direttamente su linee e barre dei grafici, invece di una legenda a colori.
• Icone per gli stati: una spunta per il successo, una croce o un segnale di avviso per gli errori.
• Motivi o stili di linea, come linee tratteggiate e continue, nei grafici.
• Posizione e ordine, così il primo elemento significa sempre la stessa cosa.
• Contrasto del testo che funzioni da solo, verificato con un controllo del contrasto.

Le grafiche per i social richiedono la stessa cura. Un post che dice «il verde significa disponibile» su un calendario rosso e verde perderà qualche lettore. Le parole trasmettono meglio il messaggio, e le parole stesse devono leggersi sullo sfondo, soprattutto sulle sfumature, dove il contrasto cambia lungo il quadro. Testo su sfumature ne parla nel dettaglio.

La versione di destra è ciò che un Mark di Gradiently fa da solo: sposta la sua zona più calma e a miglior contrasto dietro il testo e l'inchiostro automatico sceglie caratteri chiari o scuri per ogni riga, così la separazione nasce dalla luminosità e non dalla tonalità.

Come testare un design per il daltonismo

1. 1

   Fai il controllo in scala di grigi

   Esporta o fai uno screenshot del design e convertilo in scala di grigi. Se due colori che significano cose diverse diventano lo stesso grigio, cambia la luminosità di uno dei due.

2. 2

   Simula nel browser

   In Chrome o Edge apri gli strumenti per sviluppatori, richiama il menu dei comandi, scrivi Rendering e usa Emulate vision deficiencies per vedere la pagina in tempo reale come protanopia, deuteranopia, tritanopia o acromatopsia.

3. 3

   Controlla l'intero schermo in grigio

   Sia Mac sia Windows includono un filtro colore in scala di grigi nelle impostazioni di accessibilità. Attivalo per rivedere app, file di design ed esportazioni, non solo pagine web.

4. 4

   Togli il colore e rileggi

   Chiediti se ogni grafico, etichetta e stato ha ancora senso con le sole etichette e icone. Se sì, il colore è decorazione, che è il posto giusto per lui.

Le simulazioni sono approssimazioni, e la visione dei colori varia da persona a persona. Se l'accessibilità conta per il tuo prodotto, chiedi a persone daltoniche che conosci di guardare il risultato reale. Per i grafici in particolare, infographic design approfondisce etichette e impaginazione, mentre armonia dei colori aiuta quando ti serve una palette sicura che sembri comunque curata.