Tutti li usano: Verde, giallo (o arancione) e rosso. Li usiamo nella visualizzazione dei dati, li usiamo nei pulsanti, coloriamo il testo e le icone con essi e li inseriamo negli avvisi. Sono spesso usati nei momenti cruciali, quando annunciamo un successo o diamo cattive notizie. Ne abusiamo anche, usandoli per attirare l’attenzione dove non sono rilevanti. Quello che non facciamo, troppo spesso, è renderli accessibili.
Una significativa minoranza di persone è daltonica, e la maggior parte di queste ha un daltonismo rosso-verde. Dal 2011 ho dovuto risolvere per l’accessibilità dei colori in interazioni importanti, come gli avvisi per i segni vitali dei pazienti, la qualità della cura dei pazienti, lo stato del server cloud, o l’analisi delle vendite esecutive. Ecco alcuni consigli di accessibilità che ho raccolto lungo la strada, così come il mio modello personale per una tavolozza di colori del traffico utilizzabile e accessibile.
Si può progettare una bella tavolozza di colori per non vedenti, ma non fa mai male rinforzare il messaggio. Invece di cambiare il testo in rosso o verde, mettete un’icona rossa o verde di forma diversa accanto al testo. In questo modo, anche se non avete controllo sulla vostra tavolozza di colori, o il grafico è stato stampato in bianco e nero, o il vostro utente vede solo in grigio, avete fatto il vostro punto.
Caso esemplare: Excel. Excel offre icone in colori semaforici per aiutare a raccontare la storia dei vostri dati. Assicurati di usare icone di forma diversa e colori diversi! Ecco perché:
Deuteranopia e protanopia sono due tipi comuni di daltonismo rosso-verde. Testare i vostri colori rispetto ad essi ottimizzerà la maggior parte dei vostri utenti, ma le icone aiutano a concludere l’affare.
Non fidatevi delle palette di colori preimpostate
Ci sono molti framework e boilerplate estremamente utili online. Ognuno soddisfa molti bisogni, ma non tutti hanno avuto il tempo di ottimizzare i loro colori per il daltonismo.
La domanda più importante quando guardate i vostri rossi, verdi, arancioni e gialli è, “I miei utenti riconosceranno questo colore quando lo vedranno da solo?” Non fidatevi delle persone che hanno creato la vostra struttura per averci pensato. Controllate voi stessi.
Come si fa, vi chiederete? Per molti anni l’unica soluzione che ho trovato per le prove è stato Photoshop di Adobe, che offriva viste di protanopia e deuteranopia di qualsiasi cosa stessi creando. Le opzioni sono sotto View → Proof Setup (vedi immagine sotto).
Ora il Corblindor Coblis (Color Blind Simulator) è diventato il mio strumento preferito. Basta fare un rapido screenshot del tuo lavoro, e vedere come appare per molti diversi tipi di daltonismo.
Pianifica in anticipo con un modello di colore
Ho fatto un sacco di lavoro sui colori di visualizzazione dei dati nel corso degli anni, ed è emerso un modello che trovo utile. Lo offro qui, nell’interesse di rendere i dati più utilizzabili. Raccomando vivamente di considerare questo approccio quando state sviluppando una tavolozza di colori per il vostro marchio.
Queste sono le linee guida chiave:
- Usa una tonalità chiara, media e scura. Il tuo giallo dovrebbe essere la tua tonalità chiara.
- Usa un verde caldo e un rosso freddo, o un verde freddo e un rosso caldo. Basta non avere entrambi freddi o entrambi caldi.
- Niente arancione. Poiché è molto più leggero, usare il giallo invece dell’arancione rende molto meno probabile che il tuo colore di “avvertimento” sia in conflitto con il tuo verde di “successo” per gli utenti daltonici, o assomigli troppo al tuo rosso di “problema grave” (errori, per esempio).
Ecco! Grazie per aver letto. Andate avanti e divertitevi a raccontare delle belle storie con i vostri dati.
Si può fare.