Usare il colore in un progetto

Circa l'8 percento degli uomini ha una deficienza della visione dei colori rosso-verde, quindi un modulo che segnala gli errori solo in rosso lascia molti di loro a tirare a indovinare.

Non lasciare mai che il colore porti da solo il messaggio

Il criterio di successo WCAG 2.2 1.4.1, Uso del colore, sta al livello A, il più basilare. Dice che il colore non deve essere l'unico mezzo visivo per trasmettere informazioni, indicare un'azione, richiedere una risposta o distinguere un elemento visivo. Un bordo rosso su un campo di modulo con un errore va bene, purché ci sia anche un'icona o una riga di testo che dice che cosa non va. Un grafico a linee con cinque linee colorate ha bisogno anche di etichette, stili di linea diversi o simboli. I link dentro un paragrafo hanno bisogno di una sottolineatura o di un altro segnale oltre al colore.

Il motivo è in parte la visione dei colori. Il testo di neuroscienze di OpenStax spiega che alcune persone portano una variazione genetica che dà loro due tipi di cono invece di tre, o un pigmento dei coni che funziona in modo diverso. Non sono cieche a un colore, ma alcuni colori che la maggior parte delle persone distingue appaiono uguali a loro. Le forme rosso-verde sono le più comuni e riguardano circa l'8% dei maschi. Contano anche altri motivi: un telefono sotto il sole forte, un proiettore economico, una stampa in bianco e nero. Un progetto che funziona ancora in scala di grigi funziona in tutti questi casi.

Il grosso lo fa la luminosità

Per questo i designer esperti pianificano una tavolozza in due passaggi. Prima decidono i gradini di luminosità: uno sfondo molto chiaro, un tono medio per i bordi, un tono scuro per il testo. Poi scelgono le tonalità. Controllare ogni coppia di testo e sfondo con il rapporto di contrasto dell'unità 6 è il modo più rapido per sapere se i gradini sono abbastanza distanti. Le tonalità complementari non garantiscono il contrasto. Nel modello, l'arancione del marchio e il suo complementare blu hanno la stessa saturazione e luminosità HSL, e il rapporto tra loro è solo 1.06:1. Due colori possono essere il più lontani possibile in tonalità ed essere comunque difficili da leggere l'uno sull'altro.

Un semplice metodo di lavoro mette insieme le unità di questo corso. Parti da una tonalità adatta al soggetto. Usa un'armonia dell'unità 4 per scegliere una o due tonalità di supporto. Dai al colore dominante la maggior parte dell'area, circa il 60%, a un colore secondario il 30% e a un accento il 10%, la regola pratica della guida dell'Università del Delaware. Scegli la luminosità per ogni coppia di colore del testo e dello sfondo finché ciascuna raggiunge almeno 4.5:1, o 3:1 per titoli grandi e icone. Infine, controlla che niente dipenda dal solo colore: gli errori hanno parole, i link hanno sottolineature, i grafici hanno etichette.

I grafici meritano una cura a parte, perché spesso hanno bisogno di molti colori insieme. La guida dell'Università del Delaware indica ColorBrewer, uno strumento creato per le tavolozze di mappe e grafici. Per valori che vanno dal basso all'alto, una tavolozza sequenziale di una tonalità che passa dal chiaro allo scuro continua a funzionare in scala di grigi. Per le categorie, usa il minor numero possibile di colori, dai a ognuna un'etichetta accanto alla linea o alla barra e non solo in una legenda, e tieni i gradini di luminosità abbastanza diversi da non far assomigliare mai due vicini.