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.

Potrebbero interessarti anche i seguenti articoli

  • Giorno 21 – Ignorate le immagini con funzione spaziatriceGiorno 21 – Ignorate le immagini con funzione spaziatrice Giorno 21: Ignorate le immagini con funzione spaziatrice Molti progettisti usano immagini trasparenti per spaziare gli elementi della pagina in modo da controllarne […]
  • Area del filmato e SMIL.Area del filmato e SMIL. Tipicamente l'area occupata da un filmato viene definita direttamente nel tag <object> nella pagina web, con gli attributi width e height, indispensabili per un […]
  • Giorno 22 – Usate liste vere (o fatele sembrare tali)Giorno 22 – Usate liste vere (o fatele sembrare tali) Giorno 22: Usate liste vere (o fatele sembrare tali) Supponete di avere un elenco di 3 link: "Slashdot", "The Register", e "dive into mark". Al posto di noiosi punti […]
  • 9 – Colori9 – Colori 9.1 - Contrasto di colori Punti di controllo in questa sezione: 2.2 Assicurarsi che la combinazione di colori tra il primo piano e lo sfondo fornisca sufficiente […]
  • 2 – Possibilità di controllare i CSS2 – Possibilità di controllare i CSS Punto di controllo in questa sezione: 11.2 Evitare gli attributi disapprovati dal W3C . [Priorità 2]. Per essere sicuri che gli operatori possano controllare gli […]
Condividi:

Informazioni sull'autore

Franco Carcillo
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'.

Commenti

Nessun commento

    Rispondi

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    Link e informazioni