I Siti e l’Accessibilità – Utilizzo dei Colori
Continua la serie di articoli dedicati all’accessibilità, dove si vogliono dare delle linee guida per realizzare dei siti fruibili da qualsiasi tipo di utente senza creare degli ostacoli.
Ecco gli altri articoli scritti fin’ora:
- L’Accessibilità Nei Siti – Ecco Alcuni Strumenti Per Testarla
- Realizzare Un Sito Accessibile – I Form
- I Siti e l’Accessibilità – Flash
Oggi in particolare andiamo a vedere come usare i colori in modo opportuno. Tante volte li utilizziamo in modo inconsapevole, creando delle difficoltà nella navigazione e il conseguente abbandono del sito da parte dell’utente.
In particolare analizzeremo i due aspetti a cui bisogna prestare più attenzione.
1) Il contrasto
La prima regola è di avere un contrasto ottimale tra sfondo e contenuti. Con il testo nero (meglio grigio scuro) e sfondo bianco non puoi sbagliare, ma se vuoi provare altre combinazioni, occhio agli utenti che soffrono di daltonismo.
In particolare fai attenzione a queste situazioni:
- protanopia: difficoltà nel distinguere i verdi dai rossi;
- deuteranpia: difficoltà nel distinguere i verdi dai rossi;
- tritanopia: difficoltà nel distinguere tra il blu e il giallo.
Inoltre esiste una formula matematica che permette di calcolare se sfondo e contenuto sono sufficientemente contrastati:
Luminosità (non deve essere inferiore a 125)
(Rosso X 299) + (Verde X 587) + (Blu X 114)) / 1000
Differenza di colore (non deve essere inferiore a 500)
[Max (Rosso1, Rosso2) – Min (Rosso1, Rosso2)] +
[Max (Verde1, Verde2) – Min (Verde1, Verde2)] +
[Max (Blu1, Blu2) – Min (Blu1, Blu2)]
Per finire ecco qualche esempio da non seguire.
2) Funzionalità ed elementi informativi devono restare inalterati anche senza l’utilizzo del colore
Un altro aspetto a cui pochi fanno attenzione è utilizzare oltre il colore, altri modi per distinguere gli elementi del sito tra di loro.
Uno degli errori più comuni è quello di distinguere i link dal testo solo con il colore. Ma se proviamo a vedere il sito in bianco e nero riusciamo ancora a distinguere i link? Io stesso ho questa situazione, a cui presto cercherò di porre rimedio, utilizzando anche la sottolineatura.
Esempio errato
Esempio corretto
I form sono un’altra fonte di possibili errori. Ho visto alcuni siti dove i campi obbligatori si riconoscevano solo dalla diversa colorazione. Va bene usare il colore, accompagnato però da un altro elemento distintivo, come l’asterisco (*) o scrivendo la parola “obbligatorio“.
Per testare l’uso dei colori e non solo, esistono una serie si servizi on line di cui ho parlato tempo fa.
Ecco altre risorse che ti consiglio di leggere:
1 commento
[…] I Siti e l’Accessibilità – Utilizzo dei Colori […]