Accessibilità: come e perché stare attenti ai colori da utilizzare?
Negli articoli precedenti, della serie “Perché pensare tipograficamente rovina il tuo sito?”, abbiamo già parlato di dover prendere in considerazione la personalizzazione a cui può essere sottoposto un sito web da parte dell’utente e delle font standard, tralasciando però una questione importantissima: i colori.
Se fai parte di quelle persone che si avvicinano alla grafica web senza un minimo di basi, sicuramente, ogni volta che hai dovuto impostare un documento su un qualsiasi software di grafica, ti sarai trovato davanti al “dilemma dei colori”: CYMK o RGB?
Per contro, se sei un grafico con esperienza nell’ambito della stampa, avrai dovuto lottare contro le tue solite abitudini e combattere contro il tuo cervello che ragiona in pantoni.
I Colori
Sul web si usano i colori RGB, che puoi selezionare tramite il linguaggio CSS in più modi: parole chiave, codice esadecimale, percentuale e valore RGB.
Parole chiave
Per parole chiave si intende la definizione del colore tramite il suo nome, in inglese.
Per esempio: “black”, “white”, “red”, “green”… Le specifiche dello standard HTML 4.01 indicano 16 colori riconosciuti per il loro nome, ma la maggior parte dei browser moderni (rilasciati dopo il 2005) ne riconoscono una lista più ampia, parte dello standard SVG 1.0. Di questa lista, denominata X11, fanno parte 145 colori, con nomi come “gold”, “snow”,”tomato”… Questo metodo è quello che meno mi sento di consigliarti, in quanto è facile fare errori di scrittura, trattandosi di parole a volte anche lunghe e composte (tipo “lightgoldenrodyellow”). Esistono modi più semplici, quindi meglio approfittarne!
Codice esadecimale
Il codice esadecimale è la combinazione di tre coppie di caratteri dalla coppia 00 alla FF, dal nero al bianco (o meglio: da assenza di luce a presenza nel canale), dove la prima coppia indica il rosso, la seconda il verde e la terza il blu, precedute dal simbolo # (cancelletto/hash): ad esempio #000000 è il nero, #FFFFFF è bianco, #0000FF è blu e #FF0000 è rosso. Se le tre coppie sono formate ognuna da due valori identici si possono riassumere in tre caratteri, ad esempio: #FF99AA è uguale a #F9A; diverso è il caso delle coppie identiche tra di loro, tipo #5F5f5f o #0C0C0C: queste non sono riassumibili (ma sicuramente indicano un tono di grigio). Questo secondo me è il metodo migliore, in quanto più semplice e più veloce da scrivere.
Percentuale
La percentuale richiede di specificare il valore in percentuale di rosso, verde e blu secondo questa sintassi rgb(100%,100%,100%) . Come per il codice esadecimale lo 0% indica l’assenza di luce nel canale e il 100% la massima luce, per cui tutti i valori allo 0% mostrano il nero e viceversa al 100% il bianco.
Valori RGB
Simili alla percentuale, i valori RGB si scrivono secondo la sintassi rgb(255,255,255), i valori possibili sono da 0 a 255 e anche in questo caso lo 0 è il nero e il 255 è il bianco.
Come utilizzare i colori
Secondo le direttive WCAG 2.0 (punto 1.4.1) del W3C, bisogna utilizzare combinazioni di colori che siano fruibili anche a chi soffre di daltonismo (per maggiori informazioni ti consiglio di leggere l’ottimo articolo “Web Design e Daltonismo” scritto da Tommaso Baldovino sul terzo numero di Your Inspiration Magazine). Il W3C indica inoltre alcune tecniche precise per rispondere alle raccomandazioni:
- assicurarsi che le informazioni identificate mediante l’uso di colori siano identificabili anche con un testo alternativo;
- se il colore è l’unico mezzo utilizzato per le differenze tra focus su link o controlli e il testo circostante bisogna usare un contrasto di 3:1 tra gli elementi (esempi), per scegliere le coppie di colori ti consiglio questo tool;
- usare i CSS per cambiare la presentazione di un elemento quando questi riceve il focus.
Il daltonismo è più diffuso di ciò che pensi, purtroppo però focalizzarci su questo è inutile: molti siti sono di difficile consultazione anche per chi ha una vista perfetta, vediamo perché.
Accostamenti, contrasti e leggibilità
Ci sono molti modi per sbagliare: ad esempio scrivere in “negativo”, utilizzando uno sfondo scuro e un colore per il testo chiaro, una delle combinazioni peggiori è il rosso sul nero.
Cose di questo genere vanno bene solo per paragrafi molto brevi (altrimenti si affatica l’occhio), mentre se un lungo testo è la cosa più importante nel tuo sito, è bene che sia in positivo… anche se, secondo una ricerca sperimentale (Hill & Scharf 1999), risulta che il bianco lucente dello schermo non sia uno sfondo ottimale come sulla carta stampata, a meno che non sia accompagnato da lettere non troppo sottili: meglio utilizzare un grigio o un altro colore molto chiaro come sfondo; per la cronaca, il tempo di risposta più breve lo ha dato l’accostamento testo verde su fondo giallo.
Altri risultati dello studio consigliano di non utilizzare coppie di colori complementari saturi cioè giallo/viola, arancione/blu e soprattutto verde/rosso, e per un discorso di daltonismo, e perché questi colori hanno la stessa frequenza (alias poco contrasto) perciò l’occhio fa molta fatica a distinguerli. Hill consiglia anche di evitare di accostare più di due colori.
Gli accostamenti che abbiamo bollato fin ora come negativi, sono anche un po’ anti-estetici, per cui forse non ti è mai venuto in mente di utilizzarli, ma forse ti sarà capitato di pensare che un grigio chiaro su uno sfondo bianco sia molto elegante… o magari preferisci un grigio medio su sfondo grigio scuro? O un qualsiasi altro colore su una versione di sé più chiara/scura?
Sicuramente ti sarà capitato di vedere siti di web-designer con questi accostamenti, ad un primo impatto avranno sicuramente fatto la loro “porca figura”: eleganti, leggeri, con quel contrasto così morbido tra testo e sfondo, per niente netto. Ma hai provato a leggere? O meglio… sei riuscito a farlo? Devo dirti che io in alcuni casi mi sono dovuta veramente sforzare, fino ad arrendermi, chiedendomi chi avrebbe potuto assumere un designer così… non per altro, ma per una difficoltà oggettiva nel leggere il suo numero o la sua e-mail!
Il mito del web-safe
Esiste una palette di colori ridotta, denominata web-safe e composta da 216 colori e circolano voci secondo le quali questi siano i colori che vengono visualizzati nella stessa maniera da tutti i computer (soprattutto win/mac): non è così. Questa palette così ridotta era uno standard quando i computer/monitor a 256 colori erano la norma (o quanto meno abbastanza diffusi): secondo le statistiche di W3schools fino al 2000 erano diffusi per il 12%, mentre nel 2010 si è registrato uno 0% contro il 97% dei 16 milioni di colori e il 3% dei 65’000 (per intenderci gli schermi che montavano alcuni smartphone già nel 2003). W3schools dichiara inoltre che lo standard web-safe color non è più importante, giacché la maggior parte dei computer supportano milioni di colori.
Conclusioni
Abbiamo visto i vari modi di impostare i colori e alcuni consigli per scegliere gli accostamenti migliori, e soprattutto abbiamo conosciuto i peggiori per saperli evitare. Come me, sai bene anche tu che ogni progetto è a sé, ma avrai sicuramente una coppia di colori o delle tonalità che preferisci usare, quali sono? E che metodo utilizzi per selezionare il colore nei CSS, per quale motivo?
42 commenti
Trackback e pingback
[...] This post was mentioned on Twitter by Your Inspiration Web. Your Inspiration Web said: RT @yiw Accessibilità: come e…
[...] 04) Accessibilità: come e perché stare attenti ai colori da utilizzare? [...]
[...] mio ultimo articolo abbiamo parlato della leggibilità relativamente ai colori, mentre alcune settimane orsono abbiamo affrontato il tema delle…
[...] non rispettando le raccomandazioni WCAG per il contrasto dei colori tra il testo e lo sfondo (per saperne di…