Fw

Wordpress Creative Developer

I Siti e l’Accessibilità – Utilizzo dei Colori

  • Accessibilità
  • -

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:

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.

I siti e l'accessibilità - Utilizzo dei colori

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.

Esempio contrasto da non seguire

Esempio di contrasto 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

Utilizzo sbagliato del colore nei link

Esempio corretto

Esempio corretto utilizzo del colore

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

  1. […] I Siti e l’Accessibilità – Utilizzo dei Colori […]

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *