Come verificare il contrasto colore per l'accessibilità
Abbiamo già parlato in modo generico del contrasto colore. Vediamo un esempio pratico. Supponiamo che il nostro sito web abbia uno sfondo bianco e il testo di colore nero (esadecimale #000). In questo caso, il rapporto di contrasto tra sfondo e testo sarà massimo, cioè di 21:1. Diversamente, supponiamo di avere uno sfondo bianco ma un testo grigio medio, ad esempio un esadecimale #888: in questo caso il contrasto è di 3,54:1 ed è quindi molto basso, non soddisfa né il criterio della tripla A e nemmeno quello della doppia A.
Proviamo a riassumere i concetti principali che dobbiamo conoscere:
Per il livello AA, Il testo e le immagini di testo devono avere un contrasto di almeno 4,5:1 rispetto allo sfondo, oppure di almeno 3:1 per testi e immagini di testo largo (testo di almeno 18pt normale, o 14pt in grassetto)
Per il livello AAA, il testo e le immagini di testo devono avere un contrasto di almeno 7:1, oppure di almeno 4,5:1 per testi più larghi.
I testi decorativi o di componenti inattivi e i testi che fanno parte di un logotipo non hanno requisiti di contrasto
I componenti dell’interfaccia utente e gli oggetti grafici devono avere un contrasto di almeno 3:1
Verifica del contrasto colore
Questo tipo di verifiche va fatto continuamente sia quando si crea il design grafico, sia quando si sviluppa il sito web applicando il layout grafico in HTML e CSS. Alcuni strumenti automatici ci aiutano in questo, anche lo stesso Figma può essere configurato in tal senso, ad esempio tramite il plugin A11y – Color Contrast Checker.
Per la parte di sviluppo web, possiamo usare WAVE o IBM Equal Accessibility Checker per fare una scansione della pagina in tempo reale e trovare eventuali problemi, anche di contrasto.
Tuttavia è bene ricordarsi di controllare manualmente, e non solo con strumenti automatici, selezionando l’effettivo colore di sfondo e del testo da inspector del browser, ad esempio in questo modo:
Verifichiamo il codice colore del titolo
Il colore del titolo corrisponde al codice esadecimale #005a6a mentre lo sfondo della pagina è bianco, esadecimale #fafafc. Inseriamo questi valori in uno strumento di verifica del contrast, ad esempio su WebAIM:
Il rapporto di contrasto colore tra testo e sfondo è di 7,54:1
Otteniamo dunque un rapporto di 7,54:1 che è conforme sia al livello della doppia A sia a quello della tripla A. In realtà, se vogliamo essere precisi, poiché questo testo ha una grandezza carattere di 32px, richiede per la tripla A un contrasto colore di 4,5:1, perché è abbastanza grande da essere visto facilmente, quindi potrebbe avere anche un contrasto più basso.
