11/05/2023
Contrasto e colori - Accessibilità web
Regole, linee guida e i strumenti utili per rendere accessibile un sito web, un software o una web app
Dai primi anni del 2000 ci occupiamo di accessibilità web e nel corso del tempo sono cambiate molte cose, come del resto è cambiato ed è evoluto il web.
Nonostante questo, l'attenzione e la sensibilità verso i temi dell'accessibilità e dell'inclusione non sono ancora così sentiti.
Se fino a poco tempo fa l'accessibilità web riguardava solo gli enti pubblici, dal 2022 è stata introdotta anche per alcune aziende private e dal 2025 lo sarà per tutte le aziende private.
Leggi anche: Gli errori di accessibilità più comuni nei siti web.
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.
Contrasto: regole e linee guida
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).
Il Governo Italiano, membro del W3C, ed in particolare l'AGID - Agenzia per l'Italia Digitale, ha adottato questa normativa per i siti della Pubblica Amministrazione e la norma tecnica europea armonizzata UNI CEI EN 301549 (riferimento tecnico della Direttiva (UE) 2016/2102).
Ai fini dell'accessibilità si considera il contrasto di luminanza
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.
Contrasto: tool e strumenti utili
Vediamo i principali strumenti per analizzare il contrasto:
WCAG Color contrast checker
WCAG Color contrast checker è uno dei 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.
WeabAIM 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 è anche questa 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à.
Scopri il nostro servizio di consulenza sull'accessibilità: Consulenza sull'accessibilità di software e siti web di terze parti.
Per qualsiasi domanda sull'accessibilità
