Tenere conto del daltonismo

Vediamo i colori nello stesso modo?

Guarda l’immagine qui sopra. Se vedi il numero 21, o se non vedi alcun numero, è probabile che tu soffra di una forma di daltonismo (con una percezione corretta dei colori dovresti vedere un 74). Si stima che 1 uomo su 12 (8%) e 1 donna su 200 siano affetti da una forma di daltonismo. Questa percentuale di popolazione è spesso ignorata quando si progettano siti o altri tipi di interfacce.

Cos’è il daltonismo?

Ci sono diversi tipi di daltonismo che si dividono ulteriormente per il livello di gravità. Anche se in rarissimi casi può essere vero, è un errore piuttosto comune quello di pensare che le persone affette da daltonismo vedano solo in bianco e nero (Acromatopsia). La maggior parte dei soggetti daltonici fatica nel distinguere le differenze tra sfumature e livelli di luminosità di determinati colori.

La condizione più comune è la difficoltà nel distinguere tra il verde e il rosso, che si divide in due tipologie. Le persone affette da Protanopia hanno una ridotta sensibilità alla luce rossa. Le tonalità di rosso, arancione e giallo tendono a diventare verdi e ad apparire meno saturate. I soggetti affetti invece da Deuteranopia hanno una ridotta sensibilità alla luce verde, dunque distinguono con difficoltà tonalità blu, gialle, viola, rosse e verdi.

Come tenere conto del problema nei nostri progetti

Anche se il daltonismo può causare grossi problemi agli utenti, è abbastanza semplice da combattere. Se sei al corrente del problema, sei già a metà strada.

1. Usa colori con molto contrasto

Anche le persone affette da Acromatopsia riescono a percepire il contrasto (ovvero la differenza tra il chiaro e lo scuro). Per essere sicuro che il sito sia leggibile, bisogna assicurarsi che i contenuti abbiano un buon contrasto con lo sfondo. Banalmente, un testo nero su sfondo bianco possiede un alto livello di contrasto.

contrast

Usiamo strumenti per il calcolo del contrasto per testare le combinazioni tra i colori. Questo strumento non richiede grosse spiegazioni. Un consiglio: Quando sottoponi i progetti ai vari test, usa il dispositivo più piccolo che possiedi in un contesto di scarsa luminosità. Cerca di ricreare il peggiore scenario possibile. Se dovessi progettare un’app per una sveglia vorresti che i tuoi utenti fossero in grado almeno di leggere l’ora.

2. Usa diverse sfumature piuttosto che diversi colori

shades

Uno schema monocromatico utilizza diverse sfumature dello stesso colore. Questa pratica riduce in maniera piuttosto efficace tutti i problemi riguardanti gli schemi cromatici e ci aiuta ad inserire facilmente contrasto nei nostri progetti. Uno schema monocromatico non deve essere necessariamente bianco e nero, utilizzare varie sfumature di blu può creare un progetto visibilmente piacevole senza ridurre la leggibilità.

3. Sperimenta il daltonismo durante la progettazione

tools

Ci sono diversi strumenti che possono simulare gli effetti del daltonismo, permettendoci di capire come la nostra interfaccia si comporta agli occhi di una persona con questo tipo di problemi. Photoshop ha un’opzione apposita, raggiungibile semplicemente attraverso il percorso: Visualizza > Imposta prova.

4. Scegli con cautela le combinazioni di colore

Sfortunatamente, come web designers non abbiamo sempre la possibilità di scegliere i colori da utilizzare nei nostri progetti. A volte siamo limitati dalle linee guida dei brand, ma quando possibile è saggio scegliere colori primari e secondari prima di finalizzare l’immagine di un brand. Ecco alcuni colori da evitare:

color-scheme

5. Usa texture al posto del colore

Nel progettare grafici e info-grafiche, considera l’utilizzo di texture o pattern per aiutare gli utenti a distinguere i colori. Ad esempio, nel grafico qui sotto, i colori sarebbero del tutto irriconoscibili per una persona affetta da Protanopia. Inserendo delle texture, il risultato cambia.

graph

6. Non utilizzare solamente il colore per veicolare un messaggio

Quando progetti elementi come forms e interfacce complesse, non dovresti utilizzare il solo colore come indicatore. Guarda i form qui sotto. Quello sulla sinistra indica con il colore rosso la presenza di errori e con il colore verde la buona riuscita dell’operazione. Una persona affetta da deuteranopia non riuscirebbe a distinguere la differenza tra questi due messaggi. Il miglior modo per evitare questo problema è quello di utilizzare delle icone (esempio a destra).

forms

 

La lezione più importante da imparare è che ogni dettaglio (seppur minimo) dei nostri progetti influenza il loro funzionamento. Quando possibile bisogna sempre cercare di utilizzare testi, icone, forme o texture per comunicare all’utente come utilizzare i nostri siti. Creare dei siti web che siano accessibili al 100% è essenziale, e dovrebbe essere parte di ogni processo progettuale.