Verifica il contrasto dei colori e la leggibilità secondo WCAG

Ultima revisione dei contenuti:2026-09-30

Verifica se i colori del testo e dello sfondo sono leggibili secondo le norme WCAG 2.1. Rapporto di contrasto, valutazione AA/AAA e adattamento automatico dei colori. Per esempio, un testo #1B2632 su sfondo #FFFFFF dà un rapporto di 15,33:1, ben oltre la soglia AAA di 7:1.

Rapporto di contrasto

21.00 : 1

Testo normale

AA (min. 4,5:1)AAA (min. 7:1)

Testo di esempio contrasto WCAG 2.1

Testo grande / grassetto

AA (min. 3:1)AAA (min. 4,5:1)

Testo di esempio contrasto WCAG 2.1

Icona

AA (min. 3:1)

Perché il contrasto dei colori è importante?

Un contrasto insufficiente tra il testo e lo sfondo rende il contenuto difficile da leggere, in particolare per le persone ipovedenti, gli utenti anziani o chi consulta il tuo sito su uno schermo al sole. Le linee guida WCAG 2.1 definiscono soglie minime di contrasto per garantire l’accessibilità.

Questo strumento calcola il rapporto di contrasto tra due colori, valuta la conformità WCAG (AA e AAA) per il testo normale, il testo grande e le icone, e propone una funzione di adattamento automatico per trovare colori conformi.

Come usare il verificatore

La verifica è istantanea:

1. Inserisci i colori
Inserisci il colore del testo e il colore dello sfondo in HEX, RGB o HSL.
2. Verifica il contrasto
Consulta il rapporto di contrasto e la conformità WCAG AA/AAA.
3. Adatta se necessario
Usa la funzione di adattamento per trovare un colore conforme automaticamente.

Quali formati di colore sono supportati?

HEX

Formato esadecimale - la notazione di CSS e dei programmi di grafica. Il codice ha 3 o 6 caratteri (cifre 0-9 e lettere A-F), oppure 4 e 8 quando gli ultimi indicano la trasparenza. Il # si può omettere: un codice copiato senza, come 1B2632, funziona lo stesso.

#fff - bianco (forma abbreviata)
#ffffff - bianco (forma completa)
#1a73e8 - blu
#00000080 - nero con 50% di opacità

RGB / RGBA

Formato basato su tre canali: rosso (Red), verde (Green), blu (Blue). Ogni canale accetta un valore da 0 a 255. La variante RGBA aggiunge un quarto parametro - la trasparenza (alpha) da 0 a 1.

rgb(255, 255, 255) - bianco
rgba(0, 0, 0, 0.8) - nero con 80% di opacità

HSL / HSLA

Formato basato su tonalità (Hue, 0-360°), saturazione (Saturation, 0-100%) e luminosità (Lightness, 0-100%). La variante HSLA aggiunge la trasparenza. Questo formato è utile per modificare la luminosità o la saturazione di un colore.

hsl(0, 0%, 100%) - bianco
hsla(217, 91%, 60%, 0.9) - blu con 90% di opacità

Livelli di conformità WCAG

Le WCAG 2.1 definiscono due livelli di conformità per il contrasto dei colori:

AA (consigliato) - il livello minimo per la maggior parte dei siti web. Garantisce una leggibilità sufficiente.
AAA (ottimale) - il livello più elevato. Consigliato per i siti destinati a persone ipovedenti.
Testo grande - testo di almeno 18 pt, circa 24 px (o 14 pt in grassetto, circa 18,5 px). Le soglie sono più basse perché le lettere grandi sono naturalmente più leggibili.

Cosa significano i risultati del test di leggibilità?

Lo strumento mostra il rapporto di contrasto su una scala da 1:1 (nessun contrasto) a 21:1 (contrasto massimo - nero su bianco). Il risultato viene confrontato con le soglie definite nello standard WCAG:

Testo normale - richiede almeno 4,5:1 per il livello AA (standard minimo) o 7:1 per il livello AAA (standard avanzato). Si applica al testo inferiore a 18pt (24px) o inferiore a 14pt (18,5px) in grassetto.
Testo grande / grassetto - richiede almeno 3:1 per il livello AA o 4,5:1 per il livello AAA. Si applica al testo a partire da 18pt (24px) o da 14pt (18,5px) in grassetto, ad esempio i titoli grandi.
Icone ed elementi di interfaccia - richiedono almeno 3:1 per il livello AA. Si applica a icone, pulsanti, campi modulo e altri elementi di interfaccia che trasmettono informazioni.

Il livello AA è quello a cui fanno riferimento molte politiche di accessibilità delle istituzioni pubbliche, quindi è un buon punto di partenza. Il livello AAA offre una leggibilità migliore, ma non è sempre realizzabile per tutti gli elementi.

Adattamento automatico dei colori ai requisiti WCAG

Se il contrasto è troppo basso, la funzione Adatta trova automaticamente una variante di colore del testo conforme alla soglia di contrasto selezionata.

Come funziona l’adattamento:

Seleziona l’obiettivo di adattamento dalla lista, ad es. AA per testo normale o AAA per testo grande.
Clicca sul pulsante Adatta.
Lo strumento cerca tra le varianti di luminosità del colore del testo e suggerisce quella più vicina conforme ai requisiti.
Il colore suggerito può essere copiato negli appunti o impostato immediatamente come nuovo colore del testo.

L’algoritmo preserva la tonalità e la saturazione del colore originale, modificando solo la luminosità. Il colore suggerito resta coerente con l’identità visiva rispettando lo standard di accessibilità.

Cosa significano i livelli AA e AAA nello standard WCAG?

	Livello AA (minimo)	Livello AAA (avanzato)
Testo normale - min. 4,5:1	✓	✓
Testo normale - min. 7:1	—	✓
Testo grande / grassetto - min. 3:1	✓	✓
Testo grande / grassetto - min. 4,5:1	—	✓
Icone ed elementi di interfaccia - min. 3:1	✓	✓
Consigliato per contenuti essenziali	✓	✓

Quali scritture del colore gestisce questo strumento?

Incolla il colore così come ce l’hai: un codice con o senza cancelletto, un’intera riga dal foglio di stile, una costante dal codice Android, un nome CSS o solo tre numeri. Lo strumento legge da solo tutte queste scritture. La colonna centrale mostra il colore letto, la successiva il suo contrasto su sfondo bianco: entrambi li ha calcolati lo strumento.

Cosa scrivi	Come lo legge lo strumento	Contrasto su bianco	Come lo leggiamo
1B2632	rgb(27, 38, 50)	15,33:1	Il cancelletto non serve, un codice senza di esso lo leggiamo allo stesso modo
color: #1B2632;	rgb(27, 38, 50)	15,33:1	Incolla l’intera riga dal foglio di stile o dagli strumenti del browser, il colore lo tiriamo fuori noi
#00000080	rgba(0, 0, 0, 0.502)	4,00:1	In un codice di otto caratteri l’opacità sta negli ultimi due, e la consideriamo nel calcolo del contrasto
0x80000000	rgba(0, 0, 0, 0.502)	4,00:1	In una costante del codice Android o Kotlin l’opacità sta nei primi due caratteri, ed è lì che la cerchiamo
rgb(59 130 246 / 50%)	rgba(59, 130, 246, 0.5)	1,84:1	La scrittura CSS più recente, con spazi e opacità dopo la barra, la accettiamo senza modifiche
rgba(0, 0, 0, 0,5)	rgba(0, 0, 0, 0.5)	3,98:1	L’opacità scritta con la virgola decimale funziona come con il punto
rgba(0, 0, 0, .5)	rgba(0, 0, 0, 0.5)	3.98:1	Lo zero davanti al punto si può omettere: .5 per noi vale come 0.5
59, 130, 246	rgb(59, 130, 246)	3,68:1	Bastano tre numeri senza rgb(), il resto della scrittura lo completiamo noi
RGB(59,130,246)	rgb(59, 130, 246)	3.68:1	Le maiuscole nel nome della funzione e l’assenza di spazi dopo le virgole non danno fastidio
rgb(300, 0, 0)	rgb(255, 0, 0)	4,00:1	Un canale sopra 255 lo limitiamo a 255, proprio come fa il browser
hsl(217 91% 60%)	rgb(60, 131, 246)	3,63:1	Una scrittura HSL, con virgole o con spazi, la convertiamo noi in RGB
navy	rgb(0, 0, 128)	16,01:1	Conosciamo tutti i 148 nomi di colore del CSS, quindi basta scrivere la parola
transparent	rgba(0, 0, 0, 0)	1,00:1	Un testo del tutto trasparente dà un contrasto di 1:1 su qualsiasi sfondo, ed è così che lo indichiamo

Lo strumento sovrappone il testo semitrasparente allo sfondo prima del calcolo, e lo sfondo semitrasparente al bianco.

Risoluzione dei problemi del verificatore di contrasto

Messaggio di errore formato colore

Verifica il formato del colore. Un codice HEX ha 3, 4, 6 o 8 caratteri, con o senza # (ad es. #fff o 1B2632). I valori RGB e HSL vanno scritti dentro rgb() o hsl(), separati da virgole o spazi. Funzionano anche i nomi dei colori CSS, come navy.

La funzione Adatta non trova un colore appropriato

Quando lo sfondo e il testo hanno una luminosità simile nella stessa tonalità, l’algoritmo potrebbe non trovare una variante conforme ai requisiti senza cambiare la tonalità. In questo caso, prova a modificare il colore dello sfondo o a scegliere un colore del testo completamente diverso.

Il colore nel selettore non corrisponde al codice inserito

Il selettore di colori del browser supporta solo il formato HEX senza trasparenza. Se inserisci un colore in formato RGBA o HSLA con trasparenza, il selettore mostrerà solo la parte colorata (senza alfa). I calcoli del contrasto continuano a considerare la trasparenza.

Dove verificare la leggibilità dei colori?

La leggibilità è importante ovunque qualcuno debba leggere un testo o riconoscere un elemento di interfaccia:

Siti web
Testo delle pagine, pulsanti, link, moduli. Particolarmente importante per i siti aziendali i cui visitatori hanno età e capacità visive diverse.
Negozi
Prezzi, pulsanti Acquista, informazioni prodotto. Una leggibilità scarsa può significare ordini persi.
Presentazioni
Un proiettore può mostrare i colori con un contrasto più basso rispetto a un monitor. Verifica i colori prima di presentare.
Poster e volantini
I materiali stampati visti in condizioni di illuminazione variabili richiedono un contrasto elevato.
Applicazioni mobili
I telefoni vengono usati al sole, di notte e da persone di tutte le età.
Menu di ristoranti
Se stampati su carta colorata o con font decorativi, è facile ottenere un contrasto troppo basso.

Leggibilità dei colori per le persone daltoniche

Il daltonismo è un disturbo della percezione dei colori: il daltonismo rosso-verde colpisce fino all'8% degli uomini e lo 0,5% delle donne di origine nordeuropea. Le persone daltoniche possono avere difficoltà a distinguere alcune coppie di colori, anche se il contrasto di luminosità è sufficiente.

Tipi di daltonismo:

Deuteranopia - difficoltà a distinguere il verde dal rosso
Protanopia - difficoltà a percepire il rosso
Tritanopia - difficoltà a percepire il blu e il giallo (raro)

Questo strumento verifica il contrasto di luminosità, che è importante per tutti gli utenti. Tuttavia, durante la progettazione, è bene evitare combinazioni di colori problematiche (ad es. testo rosso su sfondo verde) e non affidarsi esclusivamente al colore per trasmettere informazioni: usa anche forme, icone e testo.

Cosa rende speciale questo verificatore?

Valutazione oggettiva basata su formula matematica
Il rapporto di contrasto è calcolato con la formula WCAG: il risultato non dipende dalla configurazione del monitor né dalla percezione individuale dei colori.
Conformità allo standard internazionale WCAG
I risultati seguono le soglie delle WCAG 2.1, le linee guida del W3C a cui fanno riferimento molte politiche di accessibilità.
Adattamento automatico del colore alla soglia
La funzione Adatta trova una variante di colore del testo conforme alla soglia di contrasto selezionata: preserva la tonalità, modifica solo la luminosità.
Cinque formati di colore
Formati supportati: HEX, RGB, RGBA, HSL e HSLA, oltre ai nomi dei colori CSS. Il codice colore può essere incollato direttamente da Figma, Photoshop o un foglio di stili CSS.
Tre tipi di contenuto in un solo test
Una singola verifica mostra il risultato per il testo normale, il testo grande (ad esempio i titoli grandi) e le icone: non serve testare ogni tipo separatamente.

Ultima revisione dei contenuti: 30 settembre 2026 · scritto e verificato dal team Arteon

Domande frequenti sul verificatore di contrasto

Cos’è il rapporto di contrasto WCAG?

Il rapporto di contrasto è un numero compreso tra 1:1 (nessun contrasto) e 21:1 (contrasto massimo, nero su bianco). Le WCAG 2.1 definiscono soglie minime: 4,5:1 per il testo normale (AA), 3:1 per il testo grande (AA) e 7:1 per il testo normale (AAA).

Qual è la differenza tra AA e AAA?

AA è il livello di conformità minimo consigliato: garantisce una leggibilità sufficiente per la maggior parte degli utenti. AAA è il livello più elevato: offre un contrasto ancora migliore, particolarmente importante per gli utenti ipovedenti.

Cos’è la funzione di adattamento automatico?

La funzione di adattamento cerca automaticamente una variante di colore che raggiunge la soglia di contrasto selezionata (AA o AAA). Regola la luminosità del colore mantenendo la tonalità, proponendo la variante più vicina al colore originale.

Posso incollare un codice senza # o il nome di un colore?

Sì. Lo strumento accetta HEX con o senza # (#000000 o 000000), anche di 4 o 8 caratteri con trasparenza, RGB e RGBA (rgb(0,0,0) o rgb(0 0 0)), HSL e HSLA (hsl(0,0%,0%)) e i nomi dei colori CSS (red, blue, ecc.).

I miei dati vengono inviati a un server?

No. Tutta l’elaborazione avviene localmente nel tuo browser. Nessun dato viene inviato o memorizzato.

Perché il mio colore non supera il test anche se lo vedo bene?

La percezione personale dei colori dipende dalle impostazioni del monitor, dall’illuminazione ambientale e dalle capacità visive individuali. Lo standard WCAG si basa su una formula matematica oggettiva che tiene conto di diversi disturbi della vista. Un colore leggibile su uno schermo potrebbe essere illeggibile su un altro o per un’altra persona.

Dove trovare i codici colore del mio sito web?

Nel browser (Chrome, Firefox, Edge), apri gli strumenti per sviluppatori (clic destro > Ispeziona). Nella scheda Stili vedrai i colori utilizzati nella pagina. In alternativa, estensioni come ColorZilla permettono di prelevare il colore di qualsiasi elemento senza toccare il codice.

Quali coppie di colori del mio sito verificare per prime?

Le più importanti: il testo sullo sfondo principale, il testo sui banner e le sezioni colorate, i pulsanti (colore del testo e sfondo del pulsante rispetto allo sfondo della pagina), i link e le icone. Presta particolare attenzione agli elementi che appaiono su sfondi diversi nelle varie sezioni.

Perché un codice di otto caratteri di Android dà un risultato sbagliato?

In CSS gli ultimi due caratteri di un codice di otto caratteri indicano la trasparenza (#RRGGBBAA). Android invece scrive i colori in ARGB (#AARRGGBB), con la trasparenza nei primi due. Lo strumento legge l’ordine CSS: il nero al 50% scritto per Android, #80000000, viene letto come un colore del tutto trasparente e dà 1,00:1, mentre #00000080 dà 4,00:1. Sposta i primi due caratteri in fondo prima della verifica. Una costante scritta con 0x, come 0x80000000, viene letta nell’ordine di Android.

Funziona per il design in modalità scura?

Sì. Lo strumento verifica il rapporto di contrasto tra due colori qualsiasi, indipendentemente da quale sia più chiaro. Per la modalità scura, inserisci un colore di testo chiaro e uno sfondo scuro. Valgono le stesse soglie WCAG.