Verifica del contrasto dei colori (WCAG 2.2)
Inserisci o scegli un colore del testo e uno dello sfondo. Lo strumento calcola la luminanza relativa dei due colori e il rapporto di contrasto esattamente come li definisce il W3C e mostra quali criteri di successo WCAG 2.2 sono soddisfatti. Se il contrasto non basta, propone il colore del testo più vicino che lo raggiunge.
Come si calcola
Come si calcola il contrasto
Le WCAG 2.2 definiscono il rapporto di contrasto come (L1 + 0,05) ÷ (L2 + 0,05), dove L1 è la luminanza relativa del colore più chiaro e L2 quella del più scuro. Il risultato va da 1:1 (colori identici) a 21:1 (nero su bianco).
Lo strumento calcola la luminanza relativa esattamente come la definisce il W3C: ogni canale sRGB viene diviso per 255 e linearizzato – i valori fino a 0,04045 vengono divisi per 12,92, quelli più alti diventano ((valore + 0,055) ÷ 1,055)2,4. Poi L = 0,2126 × R + 0,7152 × G + 0,0722 × B.
Esempio #777777 su bianco: 0x77 = 119, 119 ÷ 255 = 0,4667 → ((0,4667 + 0,055) ÷ 1,055)2,4 = 0,1845. Poiché i tre canali sono uguali, L = 0,1845. Il bianco ha L = 1. Contrasto = (1 + 0,05) ÷ (0,1845 + 0,05) = 4,48:1. Basta per il testo grande (3:1), ma manca di poco la soglia per il testo normale (4,5:1). Il colore proposto #767676 arriva a 4,54:1.
I requisiti delle WCAG 2.2
| Criterio di successo | Livello | Testo normale | Testo grande |
|---|---|---|---|
| 1.4.3 Contrasto (minimo) | AA | 4,5:1 | 3:1 |
| 1.4.6 Contrasto (avanzato) | AAA | 7:1 | 4,5:1 |
| 1.4.11 Contrasto non testuale (componenti UI, grafica) | AA | 3:1 | |
Per le WCAG il testo grande è di almeno 18 punti, oppure di almeno 14 punti in grassetto – nel browser circa 24 px e 18,67 px. Sono esclusi, tra l’altro, loghi, testo puramente decorativo e controlli disattivati.
Nessun arrotondamento
Le WCAG confrontano il valore esatto: 4,499:1 non soddisfa 4,5:1. Lo strumento valuta quindi il rapporto non arrotondato e lo mostra con due decimali; dove l’arrotondamento sembrerebbe raggiungere una soglia, tronca invece (4,49 anziché 4,50).
Colori trasparenti
I colori con canale alfa (per es. rgba(0, 0, 0, 0.6) o #00000099) vengono sovrapposti come li disegna il browser: uno sfondo trasparente sul bianco, un colore del testo trasparente sullo sfondo. Se la tua pagina ha un altro sfondo sotto, inserisci quel colore pieno come sfondo.
Domande frequenti
Quale rapporto di contrasto richiede l’accessibilità?
Almeno 4,5:1 per il testo normale (livello WCAG AA, CS 1.4.3) e 3:1 per il testo grande. Il livello più severo AAA richiede rispettivamente 7:1 e 4,5:1. I controlli come i bordi dei campi e le icone richiedono 3:1 (CS 1.4.11).
Quali grigi su bianco superano ancora AA?
#767676 è il grigio più chiaro con almeno 4,5:1 su bianco (4,54:1). #777777 resta appena sotto con 4,48:1.
Come trova lo strumento il colore proposto?
Mantiene tonalità e saturazione del tuo colore del testo e cambia solo la luminosità HSL a piccoli passi, verso il chiaro e verso lo scuro. Propone la modifica più piccola il cui colore arrotondato raggiunge con sicurezza l’obiettivo.
Quali norme fanno riferimento a questi valori di contrasto?
Nell’UE l’European Accessibility Act (direttiva (UE) 2019/882) rimanda, tramite la norma armonizzata EN 301 549, alle WCAG 2.1 livello AA. I criteri di contrasto sono gli stessi nelle WCAG 2.0, 2.1 e 2.2: 4,5:1 per il testo, 3:1 per il testo grande – più 3:1 per i componenti UI dalle WCAG 2.1 in poi.
Fonti e riferimenti normativi
- SC 1.4.3: W3C – WCAG 2.2: Contrast (Minimum), Level AA
- SC 1.4.6: W3C – WCAG 2.2: Contrast (Enhanced), Level AAA
- SC 1.4.11: W3C – WCAG 2.2: Non-text Contrast, Level AA
- WCAG 2.2: W3C – WCAG 2.2: Definition “relative luminance”
- WCAG 2.2: W3C – WCAG 2.2: Definition “contrast ratio”
- W3C WAI – Understanding SC 1.4.3: Contrast (Minimum)
Aggiornato al:
Strumenti correlati
- Generatore di palette di coloriCrea colori abbinati a partire da un colore di base: complementari, analoghi, triadici, quadrato, complementari divisi o monocromatici, con HEX, RGB e HSL.
- Convertitore di colori: HEX, RGB, HSL, HSV, CMYKConverti i colori: da HEX a RGB, da RGB a HEX, HSL, HSV, HWB e CMYK. Digita in qualsiasi formato o usa il selettore e copia il risultato, nel browser.
- Trova il colore da un’immagine (contagocce)Estrai il codice colore da un’immagine: apri una foto, clicca un punto e copia HEX, RGB o HSL, più i colori principali. Nessun upload, tutto nel browser.
- Calcolatore dei cicli del sonnoCalcolatore del sonno: a che ora andare a dormire se ti svegli alle 7, o quando suonare la sveglia. 4-6 cicli di sonno di circa 90 minuti, regola pratica.
- Calcolatore età del cane in anni umaniQuanti anni ha il tuo cane in anni umani? Formula 16·ln(età)+31 (Wang et al. 2020) e tabella AVMA per taglia, a confronto, con l’età senior.
- Calcolatore massa grassa (metodo US Navy)Stima la percentuale di massa grassa da altezza, collo, vita e fianchi con le equazioni US Navy di Hodgdon e Beckett (1984). In centimetri o pollici.