Come progettare palette adatte ai daltonici

La prima volta che ho davvero capito il daltonismo non è stato da una specifica tecnica — è stato durante una code review. Avevo costruito una dashboard di stato dove i punti verdi significavano "in salute" e quelli rossi "fuori servizio", e un backend engineer del team accennò, quasi scusandosi, di non riuscire a capire quali server fossero in fiamme. È uno di quei circa un uomo su dodici con un deficit della visione dei colori rosso-verde. Il mio splendido sistema a semaforo era, per lui, una griglia di cerchietti grigio-marroni identici. Niente era rotto nel codice. Tutto era rotto nel design.

È questa la cosa che caratterizza la progettazione di una palette adatta ai daltonici: i difetti sono invisibili a chi li ha rilasciati. Non puoi percepire il bug. Devi quindi costruire l'abitudine a progettare come se il colore fosse un'informazione che potresti perdere in qualsiasi momento — perché per una fetta significativa dei tuoi utenti è già così.

Quanto è diffuso e cosa va storto davvero

Il deficit della visione dei colori (CVD) interessa circa l'8% degli uomini e lo 0,5% delle donne di origine nordeuropea — all'incirca 1 uomo su 12 e 1 donna su 200. Su un prodotto con un pubblico reale, non è un caso limite. È una colonna nelle tue analytics.

Il deficit non è "vedere in bianco e nero" — la vera monocromia è rarissima. Quello che accade è che un tipo di cono nell'occhio è spostato o assente, il che fa collassare certi colori gli uni verso gli altri. I tipi principali, in ordine di diffusione:

• Deuteranomalia e deuteranopia — risposta del cono per il verde ridotta o assente. È la forma più importante: la sola deuteranomalia interessa circa il 5% degli uomini, il che la rende la singola forma più comune. Rossi, verdi, marroni e arancioni si confondono tra loro.
• Protanomalia e protanopia — risposta del cono per il rosso ridotta o assente, intorno all'1% degli uomini per la forma completa. Una confusione rosso-verde simile, ma in più i rossi appaiono più scuri e possono sparire contro il nero.
• Tritanopia e tritanomalia — deficit blu-giallo. Genuinamente rara (nell'ordine dello 0,01% e non legata al sesso, quindi colpisce uomini e donne all'incirca allo stesso modo), ma vale uno sguardo perché rompe le distinzioni blu-verde e giallo-rosa che gli altri tipi lasciano intatte.

Il titolo pratico: circa il 99% delle CVD è di tipo rosso-verde. Se la tua palette sopravvive a una simulazione rosso-verde, hai coperto la stragrande maggioranza degli utenti interessati. È lì che conviene concentrare l'attenzione per prima cosa.

È un problema diverso dal contrasto

Ecco la distinzione che inganna anche i team più attenti. Il contrasto di luminanza (quello WCAG) riguarda il chiaro contro lo scuro — riesci a leggere il testo. Il deficit della visione dei colori riguarda la confusione tra tonalità — riesci a distinguere due colori l'uno dall'altro quando hanno una luminosità simile. Sono problemi indipendenti, e puoi fallire l'uno mentre superi brillantemente l'altro.

L'esempio classico: testo rosso puro #FF0000 su verde puro #008000 ha un contrasto di luminanza di circa 1.3:1, che fallisce malamente le WCAG — ma anche se "sistemassi" il contrasto, un deuteranope farebbe comunque fatica, perché le due tonalità in sé collassano insieme. Al contrario, due colori possono avere un contrasto eccellente ed essere comunque una trappola per le CVD se stai usando la loro tonalità, e solo la loro tonalità, per veicolare un significato.

Quindi una palette adatta ai daltonici e una palette conforme alle WCAG sono cerchi che si sovrappongono, non lo stesso cerchio. Ti servono entrambi. Se non l'hai già fatto, vale la pena leggere Rapporti di contrasto WCAG spiegati accanto a questo articolo — il contrasto di luminanza è la base, e il design sicuro per le CVD è lo strato che ci si appoggia sopra.

L'unica regola che risolve la maggior parte dei casi: non affidarti mai al solo colore

Se da questo articolo prendi un solo principio, prendi questo: non affidarti al solo colore per veicolare un'informazione. Il W3C lo rende un requisito esplicito — Criterio di Successo WCAG 1.4.1, Uso del colore — ed è l'abitudine con il rapporto sforzo-risultato più alto che tu possa costruire.

La soluzione è quasi sempre la ridondanza. Ogni volta che il colore porta un significato, affiancagli un secondo segnale non cromatico:

• Testo o etichette. La mia dashboard dei server è migliorata nell'istante in cui ogni punto ha anche detto "Up" o "Down". Noioso, a prova di bomba.
• Icone e forme. Una spunta, una X, un triangolo di avviso. Gli stati di errore ricevono un'icona diversa, non solo un colore diverso. È per questo che un buon form mostra un bordo rosso e un'icona di errore e un messaggio.
• Pattern e texture. Nei grafici, riempi barre o regioni con tratteggi, punti o linee così che le categorie differiscano anche in scala di grigi.
• Posizione e ordine. Una legenda che segue lo stesso ordine dall'alto verso il basso delle aree impilate che descrive permette di abbinare per posizione, non per tonalità.

Il test rapido che applico a qualunque schermata: immagina di stamparla su una laser in bianco e nero. Se riesci ancora a comprenderla, non ti stai affidando al solo colore. Se due stati diventano identici, hai trovato il tuo bug.

Scegliere tonalità che sopravvivono alle CVD

La ridondanza si occupa del significato. Ma vuoi comunque che i colori stessi restino distinguibili ovunque possibile — soprattutto nella visualizzazione dei dati, dove non puoi mettere un'etichetta testuale su ognuno di 200 punti.

Qualche regola pratica dalle trincee:

• Evita il rosso-verde come unico contrasto. L'abbinamento "buono/cattivo", "prima/dopo", "squadra A/squadra B" che ricade su rosso e verde è il singolo fallimento CVD più comune. Se ti servono due colori contrapposti, blu e arancione è la coppia più sicura del pianeta — resta distinta in ogni tipo di CVD. Blu e rosso è una solida seconda scelta.
• Affidati alle differenze di luminosità, non solo alla tonalità. Se due categorie differiscono anche per luminanza, chi ha una CVD riesce a distinguerle anche quando le tonalità collassano. Un blu chiaro contro un blu scuro si legge come due cose distinte per tutti.
• Attenzione alle tonalità intermedie. Il petrolio, l'oliva, il marrone e gli arancioni fangosi stanno proprio nella zona di pericolo per il deficit rosso-verde. Le tonalità pure e ben separate se la cavano meglio di quelle torbide.

Invece di reinventare tutto questo, sali sulle spalle di chi l'ha risolto con rigore. La palette Okabe-Ito (chiamata anche palette Wong, dall'articolo di Bang Wong del 2011 su Nature Methods) è un set di otto colori progettato per restare distinguibile in tutti i tipi comuni di CVD. Vale la pena salvarsi i codici esadecimali: arancione #E69F00, azzurro cielo #56B4E9, verde bluastro #009E73, giallo #F0E442, blu #0072B2, vermiglio #D55E00, viola rossastro #CC79A7 e nero #000000. L'ho usata come palette categorica per più dashboard di quante ne possa contare, e non ha mai fallito una simulazione.

Quando stai costruendo una palette di brand o di interfaccia anziché un grafico, di solito non ti servono otto colori distinti per le CVD — ti servono un paio di accenti che non si confondano. È lì che il generatore di palette di colori si guadagna il suo posto: costruisci la tua armonia (uno schema split-complementare o triadico), leggi i valori HSL e poi allontana deliberatamente i tuoi due colori semanticamente più importanti anche nella luminosità, oltre che nella tonalità. La lettura in HSL rende tutto facile — abbassa la luminosità su uno, alzala sull'altro, e ti sei comprato una separazione che sopravvive alle CVD. Se vuoi capire perché certe relazioni sulla ruota stridono più di altre, Palette split-complementari vs triadiche entra nella geometria.

Testalo — non fidarti dei tuoi occhi

Non puoi valutarlo a occhio, perché (statisticamente) hai probabilmente una visione dei colori normale e tutto il punto è che il difetto è invisibile a te. Lo simuli.

• Coblis (il Color Blindness Simulator su Colblindor) ti permette di caricare uno screenshot e visualizzarlo attraverso otto diversi tipi di deficit. Tutto gira localmente nel browser, quindi puoi dargli in pasto export a piena risoluzione. È il mio strumento di riferimento per controllare una schermata finita.
• DevTools del browser. Il pannello Rendering di Chrome ha un menù a tendina "Emulate vision deficiencies" — protanopia, deuteranopia, tritanopia e visione sfocata — applicato in tempo reale alla pagina reale. Brillante per cogliere i problemi mentre sei ancora nel markup.
• Plugin per Figma e Sketch come Stark o i simulatori di visione integrati ti permettono di controllare i progetti prima ancora che vengano costruiti.

Il mio flusso di lavoro reale: progetto normalmente, poi passo le schermate chiave — dashboard, grafici, errori nei form, qualunque cosa in cui il colore significhi qualcosa — prima per la deuteranopia (la più comune), poi protanopia, poi un rapido passaggio in tritanopia. Il novanta per cento dei problemi che trovo è in quella prima vista in deuteranopia. Risolvi quelli e avrai aiutato il maggior numero di persone con il minimo sforzo.

Gli errori che continuo a vedere

• Stati di validazione rosso/verde senza icona. Il più comune. Un bordo rosso e un bordo verde sono lo stesso bordo per milioni di utenti. Aggiungi sempre un'icona e un messaggio.
• Heatmap e grafici che variano solo la tonalità. Una heatmap dal verde al rosso è un campo minato per le CVD. Usa una scala sequenziale che faccia variare anche la luminosità (dal giallo chiaro al blu scuro, ad esempio), oppure aggiungi etichette numeriche.
• Legende a colori abbinate solo dal colore. Se l'unico modo per associare una linea alla sua etichetta è "trova quella verde", gli utenti con CVD restano bloccati. Ordina la legenda in modo che corrisponda ai dati, oppure etichetta direttamente sulla linea.
• Dare per scontato che "ha superato le WCAG" significhi "è accessibile". Contrasto e CVD sono assi diversi. Una palette può superare il 4.5:1 ovunque e collassare comunque in poltiglia in deuteranopia. Testa entrambi.
• Progettare solo sul tuo monitor perfetto. Lo stesso punto cieco che nasconde i problemi di contrasto nasconde quelli delle CVD. Simula, ogni volta.

Niente di tutto questo ti chiede di progettare interfacce brutte o di abbandonare il colore. Il colore è meraviglioso e dovresti usarlo liberamente. La disciplina è semplicemente questa: lascia che il colore sia lo strato delizioso, mai l'unico strato. Affianca a ogni tonalità significativa un'etichetta, un'icona o una forma; scegli abbinamenti che sopravvivono al collasso rosso-verde; affidati alla luminosità tanto quanto alla tonalità; e lancia il simulatore prima di considerarlo finito. Fai così, e il prossimo ingegnere che non riesce a vedere i tuoi punti verdi saprà comunque esattamente quali server sono in fiamme.