Simulatore di daltonismo

Perché progettare per il deficit della visione dei colori è importante

Il deficit della visione dei colori (CVD) è comune. Il National Eye Institute statunitense riferisce che circa 1 uomo su 12 ha qualche forma di CVD; le donne ne sono colpite con una frequenza molto più bassa perché le forme più comuni sono ereditate tramite geni recessivi legati al cromosoma X. Nel complesso, la popolazione mondiale con un qualche livello di CVD è dell'ordine delle centinaia di milioni. Qualsiasi design rivolto agli utenti che si affida al rosso e al verde per trasmettere significato (indicatori di errore contro successo, grafici, pillole di stato, messaggi di convalida) deluderà una fetta significativa di utenti a meno che il colore non sia abbinato a un altro segnale.

Questo è anche un requisito formale di accessibilità. Il criterio di successo WCAG 2.2 1.4.1 («Uso del colore»), livello A enuncia la regola in modo diretto: «Il colore non è usato come unico mezzo visivo per trasmettere informazioni, indicare un'azione, sollecitare una risposta o distinguere un elemento visivo.» Il livello A è il livello di conformità WCAG più basso, non soddisfarlo significa che un sito non è solo inaccessibile ma legalmente non conforme nelle giurisdizioni che impongono la conformità WCAG (Section 508 statunitense, Accessibility Act dell'UE, Equality Act del Regno Unito).

Le otto forme di CVD

La visione umana dei colori si affida a tre tipi di fotorecettori a cono: i coni L (a lunghezza d'onda lunga, picco attorno al rosso), i coni M (a lunghezza d'onda media, picco attorno al verde), e i coni S (a lunghezza d'onda corta, picco attorno al blu-violetto). Ogni forma di CVD corrisponde all'assenza di uno di questi coni (-anopia) o a uno spostamento nella sua sensibilità (-anomalia).

La deuteranomalia è la forma più diffusa perché i geni del fotopigmento dei coni L e M sono adiacenti sul cromosoma X e differiscono solo per pochi amminoacidi. Piccole mutazioni spostano facilmente il picco di sensibilità del cono M più vicino al cono L, riducendo la capacità del cervello di distinguere tra rosso e verde.

Perché gli uomini ne sono colpiti più spesso

I geni del fotopigmento del cono L (OPN1LW) e del cono M (OPN1MW) si trovano entrambi sul cromosoma X. Gli uomini ereditano una sola X (dalla madre); le donne ne ereditano due (una da ciascun genitore). Perché un deficit recessivo si manifesti, una donna avrebbe bisogno del gene difettoso su entrambi i cromosomi X, mentre a un uomo basta averlo sulla sua singola X. L'aritmetica produce una differenza di circa 10× nella prevalenza tra uomini e donne specificamente per la CVD rosso-verde. Il gene del cono S è sul cromosoma 7 ed è autosomico, la tritanopia e la tritanomalia colpiscono uomini e donne con frequenze simili, ma entrambe le forme sono comunque molto rare in partenza.

Si applicano anche i requisiti di contrasto WCAG

Oltre al SC 1.4.1, le WCAG impongono anche rapporti di contrasto minimi per il testo e i componenti dell'interfaccia, tutti misurati rispetto all'effettivo abbinamento di colori visibile:

• SC 1.4.3 Contrasto (Minimo), livello AA: almeno 4,5:1 per il testo normale del corpo, 3:1 per il testo grande o in grassetto.
• SC 1.4.6 Contrasto (Migliorato), livello AAA: 7:1 per il testo normale, 4,5:1 per quello grande.
• SC 1.4.11 Contrasto non testuale, livello AA: 3:1 per i componenti dell'interfaccia e gli oggetti grafici (bordi dei pulsanti, indicatori di focus, contorni delle icone).

Usa questo simulatore insieme a un verificatore di contrasto. Due colori possono avere un perfetto rapporto di contrasto di 4,5:1 nella visione normale ed essere comunque indistinguibili per un deuteranope. Il simulatore coglie la seconda modalità di errore che la sola verifica del contrasto si lascia sfuggire.

Errori di progettazione comuni e le loro soluzioni

• Indicatori di stato rosso / verde per successo contro errore. Abbinali a un'icona (✗ / ✓), a un'etichetta di testo o a forme distinte. Non affidarti mai alla sola tinta.
• Link colorati senza sottolineatura. Molti utenti con CVD non riescono a distinguere un link colorato dal testo del corpo circostante. Aggiungi una sottolineatura, una variazione di spessore del carattere, o entrambe.
• Grafici a barre colorati solo per categoria. Aggiungi motivi, etichette dirette, oppure usa una palette sicura per i daltonici (Viridis, Cividis, Magma, Okabe-Ito, i set sicuri per CVD di ColorBrewer).
• Mappe di calore con gradienti rosso→verde. Passa a palette percettivamente uniformi, la Viridis di Matplotlib (predefinita dal 2017) e la Cividis (Nuñez et al, 2018, progettata specificamente per chi ha CVD) sono entrambe sicure.
• Convalida dei moduli col solo testo rosso. Abbinala a un'icona, a un messaggio di errore esplicito e a un cambiamento visibile del contorno del campo.
• Istruzioni del tipo «Fai clic sul pulsante verde». Fai riferimento alla posizione o all'etichetta, non al colore.
• Legende di mappe con tinte simili. Le mappe coropletiche con scale rosso-arancio-giallo possono ridursi a due colori indistinguibili con la deuteranopia. Usa una scala a tinta singola (dal blu chiaro al blu scuro) o una palette divergente sicura per CVD.
• Codici colore nel game design. Notoriamente, le prime Apricorn di Pokémon Cristallo e i PokéStop originali a codice colore in Pokémon GO presentavano decisioni rosso-verde irrisolvibili per molti giocatori con CVD.

Palette sicure per i daltonici

• Viridis: la palette sequenziale predefinita di Matplotlib dal 2017. Percettivamente uniforme nella visione normale e con CVD.
• Cividis: progettata specificamente per chi ha CVD (Nuñez, Anderton & Renslow, PLOS ONE 2018). Mantiene una distanza percettiva uniforme anche con deuteranopia o protanopia simulate.
• ColorBrewer: le palette di Cynthia Brewer per la cartografia. Il sito contrassegna esplicitamente le varianti sicure per CVD per i dati sequenziali, divergenti e qualitativi.
• Okabe-Ito: una palette qualitativa a otto colori progettata da Masataka Okabe e Kei Ito per l'accessibilità nell'editoria scientifica. La palette di riferimento consigliata per i dati categorici con fino a 8 categorie.

Anche i DevTools del browser hanno simulatori di CVD

Sia i DevTools di Chrome sia quelli di Edge hanno un'opzione integrata «Emulate vision deficiencies» (nella scheda Rendering) che può simulare protanopia, deuteranopia, tritanopia e acromatopsia su tutta l'area visibile. L'Accessibility Inspector di Firefox espone un simulatore simile. Questi sono ottimi per gli audit di intere pagine durante le revisioni di design, questo strumento a colore singolo li completa isolando un campione alla volta così che tu possa prendere una decisione sulla palette senza che il resto della pagina confonda il confronto.

Test diagnostici di cui potresti aver sentito parlare

• Tavole di Ishihara (Shinobu Ishihara, 1917), le famose tavole a punti colorati con numeri nascosti. Standard in ambito clinico per lo screening dei deficit rosso-verde.
• Test Farnsworth-Munsell 100-Hue: disponi i tappi in ordine continuo di tinta. Verifica la discriminazione sottile, non solo la presenza sì/no della CVD.
• Anomaloscopio: regola una miscela rosso-verde per farla corrispondere a un riferimento giallo. Usato per la classificazione clinica del tipo e della gravità della CVD.

Questo strumento non è un test diagnostico, simula come un dato colore appare a chi ha varie forme di CVD così che tu possa progettare tenendone conto, non per testare la vista di qualcuno.

Errori comuni

1. Trattare la CVD come una questione di nicchia. Un uomo su 12 è una quota significativa della base di utenti di qualsiasi prodotto di consumo, e la maggior parte di loro non lo segnala mai perché ci ha convissuto adattandosi per tutta la vita.
2. Presumere che la «modalità scura» o l'«alto contrasto» la coprano. Contrasto e CVD sono assi indipendenti. Una palette ad alto contrasto può comunque affidarsi a distinzioni rosso-verde che falliscono.
3. Testare solo con la deuteranopia. La deuteranopia è la forma più comune ma non l'unica, la protanopia, la tritanopia e le varianti parziali -anomalia producono tutte confusioni diverse. Passale in rassegna tutte.
4. Usare solo il simulatore, ignorando il verificatore di contrasto. Una palette può essere sicura per CVD e fallire comunque i minimi di contrasto WCAG 1.4.3. Usa entrambi gli strumenti.
5. Scegliere i colori per nome anziché per distanza percepita. «Rosso, verde e blu» suona ben separato; con la CVD può ridursi a «scuro, scuro, blu.» Testa i campioni reali.

Domande frequenti

Quanto è accurata la simulazione?

La simulazione della CVD è un'approssimazione, non un rendering perfetto. Gli algoritmi standard (il metodo del 1997 di Brettel, Viénot & Mollon, perfezionato da Viénot nel 1999 e Machado et al nel 2009) proiettano un colore sulla «linea di confusione» per il cono mancante o spostato nello spazio colore LMS. Il risultato è ciò che vedrebbe in media qualcuno con dicromacia completa, ma gli utenti reali con CVD variano da individuo a individuo, il cervello compensa con segnali provenienti da luminanza, contesto ed esperienza pregressa che una simulazione statica non può replicare.

La mia immagine o il mio colore vengono inviati da qualche parte?

No. La simulazione viene eseguita interamente nel tuo browser usando un elemento canvas per applicare la trasformazione del colore pixel per pixel. Nulla viene caricato, registrato o memorizzato. Questo è importante quando l'immagine che stai testando è un mockup di design non rilasciato, uno screenshot di un'interfaccia riservata, o qualunque altra cosa che non condivideresti con terzi.

Dovrei progettare per tutte e otto le forme di CVD?

In pratica, progettare per le forme più comuni (deuteranopia e deuteranomalia) copre la stragrande maggioranza degli utenti. Aggiungere una verifica contro la protanopia ti copre la maggior parte del resto. La tritanopia e la tritanomalia sono abbastanza rare che superare i test deutan / protan è di solito sufficiente, anche se un design adeguatamente accessibile che non si affida affatto alla tinta (abbinato a icone, motivi o etichette) copre tutti automaticamente.

La mia palette attuale ha «CVD-safe» nel nome. Devo comunque testarla?

Sì. «CVD-safe» di solito significa che i colori di categoria della palette sono distinguibili in simulazione, ma non appena componi un'interfaccia reale (testo su uno sfondo colorato, un'icona sopra un riempimento, uno stato hover spostato del 5% di luminosità) puoi reintrodurre la confusione. Testa le tue coppie di colori composte, non solo la palette di partenza.

Qual è la differenza tra protanopia e protanomalia?

La protanopia è l'assenza del fotopigmento del cono L (rosso), la persona interessata non ha alcuna sensibilità funzionale al rosso. La protanomalia è uno spostamento del picco di sensibilità del cono L anziché la sua assenza, la persona interessata ha una discriminazione del rosso ridotta ma non nulla. Stesso schema per deutera-/deuter- e trita-/triton-: -anopia è la forma forte, -anomalia è la forma parziale.

Gli occhiali correttivi del colore (EnChroma) funzionano davvero?

Per molte persone con deficit rosso-verde, sì, allargano il divario percepito tra certi rossi e verdi filtrando specifiche lunghezze d'onda sovrapposte tra i coni L e M. Non «curano» la CVD né fanno vedere a un dicromate i colori normali; la situazione del fotopigmento è invariata. L'efficacia varia da individuo a individuo e in base alle condizioni di illuminazione; la luce diurna all'aperto tende a essere dove aiutano di più.

Strumenti correlati