Il contrasto e i colori per i siti web accessibili
L’attenzione e la sensibilità verso i temi relativi all’accessibilità stanno aumentando negli ultimi tempi, anche se indubbiamente c’è ancora molto da fare, sia a livello pratico che formativo.
Per questo motivo vogliamo offrire alcuni consigli su come poter rendere un contenuto web più accessibile.
La WCAG 2.0 livello AA richiede un rapporto di contrasto di almeno 4,5:1 per il testo di dimensione normale e di 3:1 per il testo di grandi dimensioni.
La WCAG 2.1 richiede un rapporto di contrasto di almeno 3:1 per i componenti grafici e per l’interfaccia utente (come i bordi di input dei moduli).
La WCAG livello AAA richiede un rapporto di contrasto di almeno 7:1 per il testo normale e 4,5:1 per il testo di grandi dimensioni.
Il primo riferimento normativo italiano sull’accessibilità web è la legge 9 gennaio 2004, n. 4, detta Legge Stanca.
A livello internazionale il W3C è il consorzio che stabilisce gli standard per il web e ha creato un’utile guida che raccoglie i principali criteri di accessibilità (WCAG e la sua traduzione in Italiano).
Vediamo i principali strumenti per analizzare il contrasto:
WCAG Color contrast checker
È uno degli strumenti più completi per la valutazione del contrasto. È un’estensione per il browser che misura il contrasto su tutti gli elementi della pagina in base ai requisiti di accessibilità WCAG. Considera le proprietà CSS color e background-color e analizza anche i valori RGBA.
Può simulare il daltonismo e valutare il contrasto per le simulazioni. In questo modo, gli sviluppatori possono vedere come appaiono le pagine per gli utenti daltonici.
Lo strumento include anche due campi in cui si possono inserire manualmente i colori da testare e di prelevare il colore direttamente dagli elementi della pagina.
Infine, si aggiorna automaticamente quando il DOM della pagina cambia (aggiunta o rimozione di elementi), ma se la pagina subisce molte modifiche, questa funzionalità può essere disattivata.
WebAIM Contrast Checker
WeabAIM Contrast Checker è uno strumento fruibile direttamente sul web, per calcolare il contrasto tra testo e sfondo. È sufficiente inserire il colore di sfondo e il colore del testo per sapere se e come si stanno rispettando i livelli di contrasto per l’accessibilità.
Colorzilla
Colorzilla è un’estensione da installare sul browser che serve per identificare il colore degli elementi di ogni pagina web.
WAVE
WAVE è anch’essa un’estensione che consente di analizzare, tra le altre cose, i rapporti di contrasto per tutti gli elementi di testo della pagina contemporaneamente.
WebAIM Link Contrast Checker
WebAIM Link Contrast Checker è un tool fruibile direttamente sul web, per calcolare il contrasto dei link in relazione con il testo e lo sfondo. È sufficiente inserire il colore del link, del testo e dello sfondo per analizzare il livello di contrasto per l’accessibilità.
Conclusioni
Molti siti web, software e web app risultano ancora non accessibili e uno degli errori più comuni e facilmente risolvibili riguarda appunto il contrasto e l’uso dei colori.
