9 – 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 contrasto se osservato da qualcuno che presenti deficit di percezione del colore o quando è vista su di uno schermo bianco e nero. [Priorità 2 per le immagini, la Priorità 3 per il testo].

Tecniche:

• Usare i numeri, non i nomi, per i colori.

Usare queste proprietà dei CSS per specificare i colori:

• color, per il colore di testo in primo piano.
• background-color, per il colore di sfondo.
• border-color, outline-color per colore del bordo.
• Per i colori dei link, usare le pseudo-classi :link, :visited, :active.

Assicurarsi che siano ben contrastati i colori di primo piano e di sfondo. Se si specifica un colore di primo piano, specificare sempre anche un colore di sfondo (e viceversa).

9.2 – Non affidare le informazioni al solo colore

Punti di controllo in questa sezione: 2.1 Assicurarsi che tutte le informazioni veicolate con il colore siano disponibili anche senza, per esempio grazie al contesto o ai marcatori [Priorità 1]

Assicurarsi che le informazioni non siano veicolate soltanto attraverso il colore. Per esempio, quando viene chiesto un input all’utente, non scrivere “Scegliere una voce tra quelle elencate in verde”. Assicurarsi invece che le informazioni siano disponibili attraverso gli altri effetti di stile (per esempio un effetto di carattere) e attraverso il contesto del discorso (esempio un link di testo comprensibile).

A dimostrazione, gli esempi di questo documento hanno uno stile di default (con i CSS) che lavora in questo modo:

• Sono circondati da un bordo.
• Usano un colore di sfondo diverso.

Test rapido.
Per verificare se un documento è fruibile anche senza i colori, esaminarlo con un monitor monocromatico o attraverso un browser dove siano stati disattivati i colori. Inoltre provare a settare il browser in modo da usare solo il bianco e nero e le tonalità di grigio, e controllare il risultato.

Test rapido.
Per verificare se il contrasto dei colori sia sufficiente per essere letto da persone con deficit di percezione del colore o che usino schermi con bassa risoluzione, stampare la pagina con una stampante in bianco e nero (dove gli sfondi ed i colori appariranno in una scala di grigi).
Inoltre, fotocopiare la pagina e le copie stesse fino a due o tre generazioni, e verificare come si degrada. Questo mostrerà dove serve incrementare il contrasto o aggiungere elementi per evidenziare (esempio: nelle pagine Web di solito gli hyperlinks sono sottolineati), o se questi elementi sono insufficienti.

Per ulteriori informazioni sui colori e i contrasti, fare riferimento a Lighthouse .