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à

esempio di testo rosso su sfondo nero

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.

Esempio di testo grigio chiaro su grigio scuro

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.

Inoltre la visualizzazione dei colori a video, tra un monitor e l’altro, differisce a partire dalle impostazioni del dispositivo, dal sistema operativo installato (con le sue impostazioni), dalla sua marca e dal modello, percui è quasi impossibile che ogni utente veda lo stesso colore che tu vuoi.

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?

Tag: , ,

L'autore

Appassionata di web-design e web-designer di professione, ha una conoscenza approfondita dell'(x)HTML/CSS, ama sperimentare script in PHP e javascript ed è sempre pronta ad apprendere nuove tecniche. Per i siti preferisce uno stile sobrio con particolare attenzione all'accessibilità e all'usabilità, e soprattutto a quello che c'è sotto la scocca: il codice, rigorosamente standard.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

42 commenti

Trackback e pingback

  1. Tweets that mention Accessibilità: come e perché stare attenti ai colori da utilizzare? | Your Inspiration Web -- Topsy.com
    [...] This post was mentioned on Twitter by Your Inspiration Web. Your Inspiration Web said: RT @yiw Accessibilità: come e…
  2. I migliori post della settimana #96 | Web Developer / Web Designer / SEO Specialist / Napoli :: EmaWebDesign
    [...] 04) Accessibilità: come e perché stare attenti ai colori da utilizzare? [...]
  3. Accessibilità: il tuo sito è leggibile? | Your Inspiration Web
    [...] mio ultimo articolo abbiamo parlato della leggibilità relativamente ai colori, mentre alcune settimane orsono abbiamo affrontato il tema delle…
  4. Accessibilità e realtà (prima parte): la galleria degli orrori | Your Inspiration Web
    [...] non rispettando le raccomandazioni WCAG per il contrasto dei colori tra il testo e lo sfondo (per saperne di…