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?
L'autore
Articoli correlati
Potresti essere interessato anche ai seguenti articoli:
42 commenti
Trackback e pingback
-
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… -
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? [...] -
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… -
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…
Bravissima Anna ;)
Grazie mille Rocco :)
Anch’io per selezionare i colori da CSS utilizzo l’esadecimale, è sicuramente il metodo più veloce e più “compatto”.
Sarà bello quando RGBA sarà supportato da tutti i browser.
Sperando che quando sarà standard la gente lo usi in maniera corretta ;) grazie per il commento, mi è venuto in mente stanotte che in effetti avevo tralasciato il fatto che oltretutto l’esadecimale fa “risparmiare” in termini di peso dei file (anche se è meglio risparmiare sull’accozzaglia di colori!).
Ci sono poche cose che mi turbano nella costruzione di un sito web come i colori. Ne ho il panico e non riesco mai a trovare una soluzione definitiva per combinarli.
Se proprio dovessi scegliere, un’accoppiata che mi piace è grigio chiaro-rosso (intenso, sullo scuro), come qua: http://francescobuzzi.altervista.org/
Oppure verde scuro su verde molto soffice e chiaro come sfondo.
Oppure grigio scuro come base e arancione in primo piano: http://www.gleenk.com/ tipo così.
In definitiva: ci sono metodi migliori di altri per stabilire quali colori utilizzare?
(Scusatemi i link, è per spiegarmi meglio ;P)
Ciao Cifra, intanto ti ringrazio per il commento.
Per quanto riguarda il tuo dubbio, aspetta, non facciamo confusione!
Il primo sito che hai linkato usa dei colori che stanno bene insieme (il grigio è un colore neutro, per cui si accoppia con tutto), però per quanto riguarda il testo non essendocene (credo sia in costruzione?) non sappiamo che colore abbia scelto. In ogni caso lo sfondo (della parte di contenuto) è un grigio chiaro quasi bianco, che è una buona scelta… bisogna vedere che colore userà per il testo. Invece già il contrasto testo/sfondo dei link del menu è poco accentuato, essendo anche questo sfondo di un grigio leggermente più scuro ma sempre molto chiaro e il testo sopra bianco: è di difficile lettura.
Questo è esattamente un caso di quelli che dicevo: dove l’impatto estetico è buono, ma leggere diventa effettivamente difficile.
Per quanto riguarda il sito Gleenk invece, l’accostamento di colori è piacevole, ma riguarda quasi esclusivamente parti decorative mentre per il testo sceglie un canonico nero su bianco che è sicuramente leggibile.
E’ molto bello l’effetto dei link laterali sopra la texture nera e grigia, non distolgono per niente l’attenzione dalla parte importante (gli articoli del blog) però faccio un po’ fatica a leggerli (in effetti sono di un grigio prossimo al nero #888), secondo me sarebbe meglio provare con un grigio leggermente più chiaro.
Per quanto riguarda la tua domanda: per le parti testuali trovi tutte le risposte nell’articolo, per le parti decorative ti segnalo questo tool molto carino che può servire da spunto http://colorschemedesigner.com/
bel articolo,
grazie
Grazie a te del commento!
Personalmente uso da sempre gli esadecimali e quando ho bisogno di un aiuto per decidere la coppia di colori del sito, mi faccio aiutare da chi ne sa più di me, aka questo tool ;-)
http://colorschemedesigner.com/
Ciao Joel, grazie per la tua condivisione… ti ho preceduto di qualche minuto nel segnalare color scheme ;)
Questione di sfortuna, avevo aperto la pagina da un pezzo e ho visto la tua segnalazione solo dopo il refresh successivo al posting :-D
consiglio un plugin per modificare/eliminare i commenti nei 5 minuti successivi al post ;-)
Lo farò presente ;)
Complimenti Anna, sempre degli articoli interessantissimi :)
Anche io usa sempre gli esadecimali…sarà perchè impostando la bozza con photoshop è piuttosto comodo fare copia incolla del codice sul css :D
Grazie mille Eli :D
Anche questo è da tenere in conto… si risparmia tempo!
Ottimo articolo, ricordiamoci anche che si può migliorare la leggibilità di un testo utilizzando l’attributo text-shadow con un colore adatto
Ciao Giacomo, grazie per i complimenti.
L’ombra aiuta molto ad ammorbidire i contrasti e creare un effetto più morbido: purtroppo non possiamo farvi ancora affidamento non essendo supportata da tutti i browser (giustamente, dato che non rientra ancora negli standard).
Credo non sia necessario che in tutti i browser il testo sia perfettamente uguale, sopratutto quando si parla di ombre sul testo. L’importante è che queste ombre non siano usate sugli elementi quali il brand del sito. Chi supporta la tecnologia text-shadow è giusto che possa usufruire di un testo con una leggibilità migliore, mentre chi non la supporta dovrà accontentarsi. L’importante è che l’esperienza di lettura nel suo insieme non sia compromessa
Per carità Giacomo, sfondi una porta no aperta, spalancata! Precisavo solo che non è un metodo affidabile al 100% e quindi bisogna sempre fare attenzione alle altre cose prima, essendo solo un di più ;)
Volevo segnalare un tool che permette di controllare il contrasto di due colori, inoltre permette di vedere come visualizzano i colori le persone che hanno problemi come i daltonici.
Il tool si chiama Colour Contrast Analyser e si può trovare qui http://www.visionaustralia.org/info.aspx?page=628
Complimenti per l’articolo.
Ciao Xma, grazie mille per il tuo commento e il tuo contributo, veramente utile!
Ottimo articolo Anna, complimenti!
ehehe ricordo che da web designer, la prima volta che mi sono accostato al mondo della stampa è stata una vera sfida…:)
ora dopo 6 anni passo tranquillamente tra fogli di stile css e impaginazioni in indesign o xpress con disinvoltura..ma all’inizio è stata dura
Ciao Ciro, ti ringrazio :)
Ho sempre visto la stampa come un mondo affascinante, e devo dire che me la cavo anche abbastanza… purtroppo apro indesign così raramente che ogni volta è un dramma a ricordarmi dove trovo alcune funzioni, specialmente a numerare le pagine ci passo la vita! :)
la stampa a volte se si riesce ad instaurare un certo rapporto con il cliente, da una certa soddisfazione, parlo di scelta della carta, colori pantone, stampa a 5/6 colori ecc…ma soprattutto il prodotto si può toccare…:)
trovo che un web designer dovrebbe fare esperienza di carta stampata e viceversa per scoprire che non sono poi 2 mondi tanto distanti tra loro ;)
Articolo ben scritto. Io recentemente mi sono totalmente convertito (vantaggi e svantaggi) a rgba! Troppo comodo!
Ciao Kiko, grazie del commento!
Sinceramente però non capisco perché lo trovi “comodo”, te lo chiedo proprio senza malizia, potresti spiegarmi?
Io trovo sia comodo utilizzarlo al posto di un’immagine con una certa percentuale di trasparenza che lascia intravedere lo sfondo (vantaggi: meno codice ed eliminiamo l’immagine; svantaggi: tutti i soliti dei CSS3), ma su colori piatti (o su sfondi piatti), personalmente non vedo l’utilità.
Attendo un’illuminazione :)
Esattamente per “comodo” intendo il quarto parametro relativo alla trasparenza. Niente più immagini e una sola riga di codice!
Ah okay, allora avevo capito bene!!
Hai detto giusto, il primo è in costruzione ;) Ed effettivamente il menu è davvero troppo poco leggibile: provvederò :)
Grazie per la risposta puntuale e curata. Un’altra qualità che vi contraddistingue…
Continuate così ;)
Non avevo capito che tu fossi Francesco… sennò ti avrei sgridato in maniera più diretta! ;)
Scherzi a parte, grazie mille per i complimenti e mi raccomando al menu!:)
:D Non l’ho detto apposta, sapendo che mi avresti redarguito :D
Per le prossime volte, ormai lo so… ;)
A proposito degli accostamenti da “porca figura”, mi piace pensare che l’estetica abbia un valore oggettivo solo in relazione all’utilità sostanziale o simbolica che procura alle cose. Un fiore all’occhiello sulla giacca, come pure una pochette o un fermacapelli, o ancora un pulsante di pagamento o addirittura un adesivo sulla porta del frigorifero, sono scelte che esaltano il soggetto “decorato” in una misura direttamente proporzionale alla loro capacità di comunicare un messaggio o di agevolarne l’uso.
Il nero è d’impatto. Elegantissimo. Ma sullo sfondo crea esperienze traumatiche. Seguivo un sito di approfondimento storico di grande spessore che aveva accostamenti di questo tipo. Ho dovuto smettere, perché ogni volta mi procurava 2 o 3 ore di offuscamento visivo.
Ottimo articolo!
Ciao Carlo, grazie per il tuo commento e per i complimenti.
Hai detto cose giustissime, soprattutto sul fatto che aiutano la comunicazione, aspetto che ho un po’ tralasciato nell’articolo… i colori oltretutto trasmettono informazioni emozionali sul contenuto per questo è una scelta molto importante da fare… ma bisogna avere sempre la coscienza di rendere leggibili le informazioni, specie se sono lunghi articoli!
Bell’articolo, solo una cosa, i colori di tipo tomato, gold ecc
io credo che siano stati implementati nei CSS3 perchè sono i corrispettivi dei pantone, quindi se aziende hanno dei colori pantone per la loro comunicazione cartacea, possono mantenere i colori del marchio anche sul web.
Per il resto complimenti! come al solito, ma tu non dovevi anche scrivere per il mio blog !? eheh
Ciao!
Ciao Francesco, scusami se ti rispondo solo ora ma mi era sfuggito il tuo commento.
Non ci avevo pensato al fatto del pantone, probabilmente hai ragione (che sia questo il motivo) ma non bastava prendere il corrispettivo in esadecimale o rgb?
Grazie mille dei complimenti, scusami in effetti è passato molto tempo da quando me l’hai chiesto ma tra il lavoro e tutto è una sfida riuscire a trovare anche il tempo per vivere :)
Ciao!!
ciao anna, complimenti per l’articolo. volevo chiederti un consiglio. dobbiamo rinnovare il nostro sito: si tratta di una webtv. non vorremmo ricadere sullo sfondo bianco ma i nostri web designer dicono che per problemi di accessibilità non potremmo certo averlo nero, bluette o viola, come avremmo voluto. ho dato un’occhiata alla normativa ma non mi sembra di aver letto di divieti o requisiti tali da escludere l’utilizzo di uno sfondo bluette con testo bianco, p.e. tu cosa mi consigli e cosa ne pensi?
Ciao Celeste,
lo sfondo nero inaccessibile mi sembra veramente un’assurdità: browser testuali come lynx hanno proprio lo sfondo nero.
Il nero e il bianco, essendo colori neutro e al massimo contrasto sono sicuramente quelli che meglio si prestano come sfondo, dando la possibilità di utilizzare una vasta gamma di palette di colori con sufficiente contrasto, ma nessuno vieta di utilizzarne altri, sempre facendo attenzione a prendere una giusta tonalità (meglio non troppo accesa, che stanca l’occhio) e ad avere un buon contrasto per il testo e i link.
Alla peggio, con i CSS e un piccolo javascript è molto facile impostare un foglio di stile alternativo che preveda tutti i requisiti di accessibilità, come potrebbe essere un classico testo nero su sfondo bianco.
In bocca al lupo!
Expert Anna :)