Verifica del rapporto di contrasto (criteri WCAG)
Indicate due colori per calcolare il rapporto di contrasto secondo le WCAG (Web Content Accessibility Guidelines) e verificare la conformità ai livelli AA e AAA.
I requisiti WCAG sul rapporto di contrasto
| Livello | Elemento | Rapporto richiesto |
|---|---|---|
| AA (minimo) | Testo normale | almeno 4,5:1 |
| AA (minimo) | Testo grande (da 18 pt, oppure da 14 pt in grassetto) | almeno 3:1 |
| AA (minimo) | Componenti di interfaccia e oggetti grafici | almeno 3:1 |
| AAA (elevato) | Testo normale | almeno 7:1 |
| AAA (elevato) | Testo grande | almeno 4,5:1 |
Che cos'è il rapporto di contrasto?
Il rapporto di contrasto esprime la differenza di luminosità fra il colore del testo e quello dello sfondo con un valore compreso fra 1:1 (nessuna differenza) e 21:1 (la differenza massima possibile, nero su bianco). Più il numero è alto, più il testo risulta facile da leggere. Le WCAG (Web Content Accessibility Guidelines) definiscono, a partire da questo valore, due livelli di conformità, AA e AAA. Questo strumento calcola automaticamente il rapporto a partire da due codici colore, mostrando a colpo d'occhio se vengono soddisfatti ciascuno dei cinque requisiti previsti.
Il calcolo si basa su un valore chiamato «luminanza relativa» (relative luminance). A differenza di una semplice misura di luminosità, come il valore L del modello HSL, la luminanza relativa si ottiene rimuovendo prima la correzione gamma dai valori sRGB, quindi ponderando e sommando i canali rosso, verde e blu in base alla sensibilità dell'occhio umano a ciascuno di essi: il risultato si avvicina così molto di più alla luminosità percepita visivamente. Colori simili tendono quasi per definizione a produrre un rapporto di contraste basso: un esito «Non conforme» non significa quindi che i colori scelti siano sbagliati in sé, ma solo che conviene allargare il divario di luminosità fra di essi.
Come usare il verificatore di contrasto
- Indicate il colore del testo Sceglietelo con il selettore oppure digitate direttamente un codice esadecimale. Il valore predefinito è un grigio scuro (#333333).
- Indicate il colore di sfondo Procedete allo stesso modo, con il selettore di colore o un codice esadecimale. Il valore predefinito è il bianco (#ffffff).
- Consultate il risultato Man mano che inserite i valori, il rapporto di contrasto e i badge conforme/non conforme per ciascun requisito AA e AAA si aggiornano in tempo reale.
- Scambiate i colori se serve Usate il pulsante «Scambia i colori» per invertire testo e sfondo, così da confrontare la combinazione anche nella sua forma capovolta.
Consigli per sfruttarlo al meglio
- I colori del testo e dello sfondo si possono scegliere con il selettore oppure digitando direttamente il codice esadecimale (sono accettate sia la forma `#RRGGBB` sia `#RGB`).
- Il pulsante «Scambia i colori» inverte rapidamente testo e sfondo per confrontarli: comodo quando valutate più varianti cromatiche per un logo o un'icona.
- Il livello AAA è più severo del livello AA. Per un sito comune si considera minimo raccomandato il livello AA, mentre per i contenuti in cui la leggibilità è cruciale è preferibile puntare al livello AAA.
- Il requisito per «componenti di interfaccia e oggetti grafici» (almeno 3:1), che riguarda per esempio i bordi dei pulsanti e le icone, è un criterio di successo introdotto con le WCAG 2.1 (1.4.11).
Quando si usa questo strumento
Verificare il colore di pulsanti e link
Inserite il colore del testo e dello sfondo dei principali pulsanti di azione o dei link testuali di un sito per confermare che rispettino il livello AA (almeno 4,5:1).
Controllare loghi e banner rispetto al loro sfondo
Permette di verificare in anticipo se il colore di un logo o il testo principale di un banner promozionale resta ben leggibile sullo sfondo su cui verrà collocato.
Fare un audit della tavolozza colori di un design system
Passate in rassegna, una alla volta, le combinazioni esistenti di colori del brand e del testo per verificare se l'intera interfaccia rispetta i requisiti di accessibilità, tenendo traccia dei risultati.
Validare la combinazione di colori della modalità scura
Utile per verificare, combinazione per combinazione, se i colori invertiti per la modalità scura rispettano ancora gli stessi requisiti di contrasto della modalità chiara.
Glossario
- Luminanza relativa
- Una misura di luminosità calcolata rimuovendo la correzione gamma dai valori sRGB e poi ponderando e sommando i canali rosso, verde e blu in base alla sensibilità dell'occhio umano a ciascuno. È la base del calcolo del rapporto di contrasto.
- Rapporto di contrasto
- Un numero compreso fra 1:1 e 21:1, ricavato dalla luminanza relativa di un colore chiaro e di uno scuro. Più il valore è alto, maggiore è il divario di luminosità fra i due colori e più leggibile risulta il testo.
- WCAG
- Sigla di Web Content Accessibility Guidelines, lo standard internazionale sull'accessibilità del web mantenuto dal W3C, che definisce anche i criteri di superamento del rapporto di contrasto.
- Livello AA
- Il secondo livello di conformità più alto delle WCAG. Il testo normale deve raggiungere un rapporto di contrasto di almeno 4,5:1. È ampiamente considerato il requisito minimo richiamato da molte normative e linee guida.
- Livello AAA
- Il livello di conformità più alto delle WCAG. Il testo normale deve raggiungere un rapporto di contrasto di almeno 7:1. Non è obbligatorio, ma è consigliato quando la leggibilità è particolarmente critica.
- Testo grande
- Una categoria definita dalle WCAG come testo normale da 18 punti (circa 24 px) in su, oppure testo in grassetto da 14 punti (circa 18,66 px) in su. Vi si applica un requisito più permissivo rispetto al testo normale.
- Componente di interfaccia
- Elementi visivi che indicano un'interazione possibile, come i bordi dei pulsanti, i contorni dei campi di input o le icone. Le WCAG 2.1 hanno introdotto per questi elementi un nuovo requisito di almeno 3:1.
Domande frequenti
A proposito — come sono nati i criteri di accessibilità
Le WCAG (Web Content Accessibility Guidelines) sono linee guida internazionali elaborate soprattutto dal W3C (World Wide Web Consortium); la prima versione, WCAG 1.0, uscì nel 1999. Già allora era chiaro che ridurre le barriere incontrate da chi naviga con tecnologie assistive, come i lettori di schermo, fosse una questione centrale.
L'attenzione al rapporto di contrasto nasce dalla varietà delle condizioni visive: una quota non trascurabile della popolazione ha un'alterazione della percezione dei colori (nei maschi circa uno su venti), con l'età l'ingiallimento del cristallino riduce la sensibilità al contrasto e in pieno sole lo schermo del telefono diventa difficile da leggere. Fissare una soglia numerica ha permesso ai progettisti di verificare l'accessibilità in modo oggettivo, senza affidarsi al solo giudizio soggettivo sulla «leggibilità».
Oggi in molti Paesi l'accessibilità del web è un requisito di legge — nell'Unione europea la direttiva 2016/2102 vincola i siti del settore pubblico e l'European Accessibility Act estende gli obblighi dal 2025 a numerosi servizi privati — e la verifica del contrasto è ormai un controllo di qualità di base, imprescindibile nella realizzazione di un sito aziendale.