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.