Verificatore di contrasto WCAG
Verifica l’accessibilità dei tuoi colori testo/sfondo.
- Istantaneo
- Gratis
- Privato (elaborato localmente)
- Senza registrazione
Colori leggibili da tutti, verificati in due clic
Quasi una persona su dodici percepisce male certi contrasti. Le WCAG (Web Content Accessibility Guidelines) fissano rapporti minimi tra testo e sfondo; questo verificatore li calcola in diretta, con la formula ufficiale della luminanza relativa, e mostra un’anteprima reale della tua combinazione.
-
Scegli i tuoi due colori
Con il selettore o incollando un codice esadecimale (#rrggbb o #rgb).
-
Leggi il rapporto
Da 1:1 a 21:1, con i quattro verdetti AA/AAA per testo normale e grande.
-
Regola se serve
Modifica la luminosità di uno dei colori fino al superamento, aiutandoti con l’anteprima.
Le soglie WCAG in una tabella
| Livello | Testo normale | Testo grande |
|---|---|---|
| AA (minimo) | 4,5 : 1 | 3 : 1 |
| AAA (rafforzato) | 7 : 1 | 4,5 : 1 |
| Componenti d’interfaccia (2.1) | 3 : 1 | 3 : 1 |
Il contrasto va verificato per ogni coppia testo/sfondo della tua interfaccia — ricorda gli stati: link al passaggio del mouse, pulsanti disattivati, placeholder e modalità scura.
Domande frequenti
Che cos’è il rapporto di contrasto?
È il rapporto tra la luminanza del colore più chiaro e quella del più scuro, da 1:1 (identici) a 21:1 (nero su bianco). Le WCAG lo usano per garantire la leggibilità del testo a tutti, comprese le persone ipovedenti.
Quali soglie bisogna raggiungere?
Livello AA: 4,5:1 per il testo normale, 3:1 per il testo grande. Livello AAA, più esigente: 7:1 e 4,5:1 rispettivamente. AA è il minimo legale in molti paesi per i servizi pubblici.
Cosa conta come «testo grande»?
Secondo le WCAG: almeno 18 pt (24 px) in peso normale, o 14 pt (18,5 px) in grassetto. I titoli grandi tollerano quindi un contrasto inferiore rispetto al corpo del testo.
Il contrasto riguarda anche gli elementi non testuali?
Sì: dalle WCAG 2.1, i componenti d’interfaccia (bordi dei campi, icone informative, stati di focus) devono raggiungere 3:1 con i colori adiacenti (criterio 1.4.11).
Il mio rapporto è insufficiente: come lo correggo?
Scurisci il testo o schiarisci lo sfondo (o il contrario in tema scuro). Spesso bastano pochi passi di luminosità — mantieni la stessa tinta e regola la chiarezza per preservare la tua palette.