Come calcolare il rapporto di contrasto dei colori (WCAG AA/AAA)
Il rapporto di contrasto dei colori misura quanto un colore di testo si distingue dal suo sfondo, con un valore che va da 1:1 (colori identici) a 21:1 (nero puro su bianco puro). Il WCAG 2.1 stabilisce rapporti minimi perché un testo sia considerato leggibile: 4,5:1 per il testo normale al livello AA, la soglia usata dalla maggior parte degli audit di accessibilità e dei requisiti legali.
La formula
Il rapporto deriva dalla luminanza relativa di ciascun colore, non da come il colore “appare” sullo schermo. Quattro passaggi trasformano un codice hex in un valore di luminanza:
- Scomponi l’hex in R, G, B e dividi ciascun valore per 255, così ogni canale diventa un numero tra 0 e 1.
- Linearizza ogni canale. Gli schermi non traducono i valori di colore in luminosità in modo lineare, quindi ogni canale riceve una correzione gamma: se il valore è ≤ 0,03928, si divide per 12,92; altrimenti si applica
((valore + 0,055) / 1,055) ^ 2,4. - Pesa e somma i canali nella luminanza relativa:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Il verde ha il peso maggiore perché l’occhio umano vi è più sensibile; il blu ha il peso minore. - Dividi la luminanza più chiara per quella più scura, entrambe aumentate di 0,05:
(L_chiara + 0,05) / (L_scura + 0,05).
Quel + 0,05 finale ha una funzione precisa: impedisce al rapporto di schizzare verso l’infinito quando uno dei due colori si avvicina al nero, ed è il motivo per cui nero puro su bianco puro si ferma esattamente a 21:1 invece che a un numero molto più alto.
Esempio pratico: #767676 su bianco
Questa coppia grigio su bianco ricorre spesso nella documentazione WCAG perché cade proprio su una soglia, il che la rende un buon caso da calcolare a mano.
Passo 1. #767676 in RGB è 118, 118, 118. Diviso per 255 dà 0,4627 per ogni canale.
Passo 2. 0,4627 è superiore a 0,03928, quindi si linearizza con la formula gamma: ((0,4627 + 0,055) / 1,055) ^ 2,4 = 0,1810. I tre canali sono uguali qui, quindi questo valore vale per R, G e B insieme.
Passo 3. Luminanza: L = 0,2126 × 0,1810 + 0,7152 × 0,1810 + 0,0722 × 0,1810 = 0,1810. La luminanza del bianco è 1,0 (ogni canale si linearizza esattamente a 1).
Passo 4. Rapporto: (1,0 + 0,05) / (0,1810 + 0,05) = 1,05 / 0,2310 = 4,545, arrotondato a 4,54:1.
Questo valore si colloca appena sopra la soglia di 4,5:1 per AA su testo normale, e anche appena sopra la soglia di 4,5:1 per AAA su testo grande, ma ben sotto al 7:1 richiesto da AAA per il testo normale. Un solo hex, tre verdetti diversi a seconda della dimensione del testo e del livello a cui si punta.
Come se la cavano davvero alcune coppie di colori comuni
| Coppia | Rapporto | AA normale (4,5:1) | AAA normale (7:1) | AA grande (3:1) | AAA grande (4,5:1) |
|---|---|---|---|---|---|
#AAAAAA su #FFFFFF | 2,32:1 | Non superato | Non superato | Non superato | Non superato |
#767676 su #FFFFFF | 4,54:1 | Superato | Non superato | Superato | Superato |
#2563EB su #FFFFFF | 5,17:1 | Superato | Non superato | Superato | Superato |
#333333 su #FFFFFF | 12,63:1 | Superato | Superato | Superato | Superato |
Da questa tabella emergono due cose. Primo, un blu a saturazione media come #2563EB (colore comune per pulsanti e link) supera AA per il testo del corpo, ma fallisce AAA del tutto, quindi un sito che punta ad AAA per i link ha bisogno di una tonalità più scura. Secondo, il grigio chiaro molto usato per i placeholder intorno a #AAAAAA non supera nessuna delle soglie, nemmeno il minimo di 3:1 per il testo grande, il che spiega perché il testo grigio “discreto” su sfondo bianco è uno dei risultati più comuni negli audit di accessibilità.
Verifica i tuoi colori
Inserisci due valori hex qui sotto per ottenere il rapporto esatto e vedere quali livelli WCAG superano, dal vivo, senza upload né chiamate al server.
Ma la volpe, col suo balzo, ha raggiunto il quieto Fido
Ma la volpe, col suo balzo, ha raggiunto il quieto Fido
Errori comuni
Dimenticare che il testo grande ha una soglia più bassa. Il WCAG definisce “testo grande” come 18pt (24px) peso normale o 14pt (18,66px) grassetto in su. Un titolo di 24px richiede solo 3:1, non 4,5:1, quindi un design system che applica la stessa regola di contrasto a ogni dimensione di testo finisce per respingere titoli già conformi.
Testare il contrasto del testo ma non quello dei componenti dell’interfaccia. Il WCAG 1.4.11 fissa un minimo separato di 3:1 per elementi non testuali come i bordi dei pulsanti, i contorni dei campi dei form e le icone che veicolano significato da sole. Un pulsante con un contrasto del testo perfetto di 7:1 può comunque fallire un audit se il suo bordo si confonde con lo sfondo.
Controllare il contrasto rispetto allo sfondo sbagliato. Un testo su una foto, un gradiente o una sovrapposizione semitrasparente non ha un unico colore di sfondo, ne ha molti. Il rapporto vale solo per il punto esatto campionato; un gradiente chiaro in alto e scuro in basso richiede di controllare il punto peggiore, non la media.
Dare per scontato che i colori del brand siano esenti. Il logotipo in sé è esente dai requisiti di contrasto, ma il testo del corpo e dell’interfaccia in un colore del brand non lo è. Molti blu e rossi di brand che funzionano bene come accento del logo falliscono il 4,5:1 quando usati come testo di paragrafo da 16px su bianco.
Domande frequenti
Qual è la differenza tra AA e AAA? AA è lo standard a cui fanno riferimento la maggior parte dei requisiti legali di accessibilità (ADA negli Stati Uniti, EN 301 549 nell’UE), ed è ciò che verifica la maggior parte degli audit. AAA è più severo ed è pensato soprattutto per contenuti rivolti specificamente a utenti ipovedenti; lo stesso WCAG riconosce che AAA non è raggiungibile per ogni tipo di contenuto, quindi la maggior parte delle organizzazioni punta ad AA in modo diffuso piuttosto che ad AAA ovunque.
Il rapporto di contrasto tiene conto del daltonismo? No. Il rapporto di contrasto misura la luminanza (la luminosità), non la tonalità, quindi aiuta incidentalmente molte forme di daltonismo non dipendendo dalla capacità di distinguere colori specifici. Ma non sostituisce un controllo sul daltonismo: due colori possono avere un contrasto eccellente ed essere comunque difficili da distinguere per chi ha daltonismo rosso-verde, se differiscono soprattutto per tonalità e non per luminosità.
Perché nero puro su bianco dà esattamente 21:1 e non un numero più tondo?
La luminanza del nero è 0 e quella del bianco è 1. Inserendo questi valori nella formula del rapporto si ottiene (1 + 0,05) / (0 + 0,05) = 1,05 / 0,05 = 21. Il risultato è esattamente 21:1 per come è stata scelta la costante +0,05, non per caso o per arrotondamento.
Un tema dark mode richiede controlli di contrasto separati? Sì. Sostituire uno sfondo chiaro con uno scuro non conserva il rapporto: testo bianco sul blu del tuo brand e testo blu del brand su uno sfondo quasi nero sono due coppie di luminanza diverse, con due rapporti diversi, quindi ogni tema deve passare dal verificatore per conto proprio, invece di assumere che il risultato della modalità chiara resti valido.