Giorno 12 – Usate i colori sicuri

Giorno 12: Usate i colori sicuri

Questo suggerimento è una regola generale applicabile a molte aree di progettazione web, ma mi concentrerò su uno specifico esempio comune ai weblog: il testo associato al link.

Due sono i potenziali problemi derivanti dall’uso del colore. Primo, il colore del  testo associato al link potrebbe non essere sufficientemente contrastato con il colore di sfondo. Tutti i colori chiari su uno sfondo bianco presentano dei problemi di leggibilità; il testo sparisce nello sfondo. Similmente, un colore scuro su uno sfondo nero presenta gli stessi problemi. Ciò è vero per tutti i testi, non solo per i link, ma è stranamente comune nei weblog avere testi leggibili e link intenzionalmente illegibili, ecco perchè  ho scelto di parlarne.

Il secondo potenziale problema è la decorazione del link. Se il foglio di stile  CSS ridefinisce la regola e presenta il link in un colore differente dallo standard, occorre assicurarsi che i link siano anche distinguibili in qualche modo, usando il grassetto, il corsivo o il sottolineato, ad esempio. Altrimenti il testo associato al link può essere sì perfettamente leggibile, ma per chi ha problemi di percezione del colore, potrebbe non essere possibile comprendere che trattasi di link e non solo semplice testo. Ciò è spiegato qui sotto.

A chi serve?

  • A Michael. Questo è un’esempio di tre differenti schemi di decorazione per link.

Come mostrato, il link della prima frase usa lo schema classico, il link è in blu e sottolineato per i browser visuali. Il secondo applica due decorazioni, il grassetto e il rosso (ma non il sottolineato). Il terzo infine applica solo il rosso al testo del link.  
Ecco come gli stessi link sono visti da Michael.

Il primo link è ancora visibile perchè la disabilità visiva di Michael non riguarda il colore blu. Nel secondo esempio, il rosso viene percepito come quasi nero, ma il link è ancora in grassetto e dunque può essere distinto da Michael.  Il problema arriva con il terzo esempio, con il rosso diventato nero,  che rende impossibile distinguere il testo del link dal resto della riga.

Come fare

Per verificare un ”sufficiente contrasto”  tra il colore del testo e quello dello sfondo, usate  VisCheck per simulare come vede la vostra pagina web un daltonico .

Per verificare i problemi delle decorazioni, cercate nel CSS le regole applicate al tag “a”. Per esempio, se avete nel foglio di stile  CSS, una regola come questa, allora i link sono solo distinguibili dal loro colore rosso, e dunque non va bene:

a {
text-decoration: none;
color: red;
}

Potete far rimanere i vostri link rossi, ma assicuratevi che siano anche in grassetto, o sottolineati o in corsivo. Per fare in modo che siano rossi e in grassetto, aggiungete questa linea:

a {
text-decoration: none;
color: red;
font-weight: bold; /* add this line */
}

Approfondimenti

  • VisCheck simula le difficoltà visive dei daltonici e consente di vedere cosa essi percepiscono. E’ possibile verificare un singola immagine o un’intera pagina web.  
  • Cal Henderson: Color Vision. Mostra lo spettro dei colori come percepiti dai vari tipi di disabilità visiva associata ai colori.
  • Ishihara Test for Color Blindness contiene una serie di immagini che le persone con disabilità al rosso-verde vedono differentemente o addirittura non vedono del tutto.

Franco Carcillo

Sono nato (1956) e vivo a Torino.  Da oltre 26 anni lavoro ('da sempre') presso il Comune di Torino, presso il Sistema Informativo. Mi occupo di web.  Sono infatti Direttore Responsabile dei siti internet della Città, sin dalla loro nascita, nel 1994. Prima del 1994 mi sono occupato di informatica gestionale classica, anche se in ambiente distribuito (mini e pc, sin dal loro apparire nella Civica Amministrazione).  Negli anni 80 mi sono appassionato, nel tempo libero, di telematica.  Mio è stato il primo nodo della rete Fidonet in Torino città (Fido_Torino e  TO_news) nel 1987.  Sono stato anche coordinatore nazionale della rete amatoriale, anche se solo per 6 mesi. Poi ho abbandonato:  troppe le pressioni intorno a quello che doveva essere, alla fine, un semplice hobby. Quando non ci si diverte più, meglio spegnere. Ma la passione telematica è rimasta.  Ed ecco che ho tenuto ogni settimana (sino alla chiusura del giornale!) la prima rubrica di telematica pubblicata  su un quotidiano italiano "StampaSera"; a quei tempi di internet se ne parlava vagheggiandola nei meandri universitari e militari americani. Ho pubblicato il primo speciale pubblicato in Italia riguardante i bbs su BIT della Jackson;  ho collaborato, con altre riviste, tra cui PCWORLD dove ho avuto per lungo tempo una rubrica fissa. Di interner e dei siti, che dire? C'è ancora tanta strada da percorrere: l'accessibilità ne è un'esempio. Ma anche rendere i siti davvero fruibili così come far 'trovare' la montagna di informazioni memorizzate tra le pagine, sono sfide  non da poco. Vi pare? All'Università di Torino, quest'anno, molti studenti hanno partecipato, interessatissimi, ad un mio breve seminario su 'Progettare siti web per la Pubblica Amministrazione, la sfida dell'accessibiltià e usabilità'.  E' stupefacente notare come le persone che usano tutti i giorni la rete e a cui spieghi come e perchè i siti non sono nè usabili nè accessibili si rendano immediatamente conto e capiscano: quasi un velo, un sipario sia stato loro svelato. Ecco perchè ho deciso di tradurre 'Dive into accessibility':  perchè affrontare l'accessibilità non è così difficile. Certo nei siti mastodontici le operazioni possono essere lunghe, ma non vi sono più scuse per partire con nuovi progetti 'alla cieca'.

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.