Verifica del Contrasto dei Colori Gratuita

Testa le combinazioni di colori testo e sfondo per la conformità WCAG 2.1. Assicurati che il tuo sito web sia accessibile a tutti.

94,217+ verifiche di contrasto effettuate

Rapporto di contrasto

17.06:1

Anteprima testo grande (24px)

Anteprima testo corpo normale (16px). La volpe marrone veloce salta sopra il cane pigro.

Testo piccolo (14px) — spesso usato per didascalie, note a piè di pagina e avvertenze legali.

Invertito: sfondo su colore testo (17.06:1 — stesso rapporto)

AA Testo normale

Richiede 4,5:1

SUPERATO

AA Testo grande

Richiede 3:1

SUPERATO

AAA Testo normale

Richiede 7:1

SUPERATO

AAA Testo grande

Richiede 4,5:1

SUPERATO

Pronti a costruire un sito web accessibile con questi colori?

Costruisci con questi colori

Cos'è una verifica del contrasto dei colori?

Una verifica del contrasto dei colori è uno strumento che misura la differenza di luminanza tra due colori — tipicamente il colore del testo e il colore dello sfondo — e calcola un rapporto numerico secondo le linee guida di accessibilità WCAG 2.1. Un rapporto di contrasto di 1:1 significa che i colori sono identici (testo invisibile), mentre 21:1 è il contrasto massimo possibile (nero su bianco).

La verifica del contrasto di Kleap calcola istantaneamente il rapporto di contrasto WCAG 2.1, indica se la tua combinazione di colori supera i livelli AA e AAA, mostra un'anteprima in tempo reale di come appare il testo su ogni sfondo e suggerisce il colore di testo alternativo più vicino che superi la verifica di accessibilità.

Livelli di contrasto WCAG spiegati

AA Testo normale

4,5:1 minimo

Richiede un rapporto di contrasto minimo di 4,5:1. Questo è lo standard più ampiamente richiesto dalle leggi sull'accessibilità e dalle politiche aziendali.

AA Testo grande

3:1 minimo

Richiede un rapporto di contrasto minimo di 3:1. Si applica al testo di almeno 18pt (24px) o 14pt (18,67px) in grassetto.

AAA Testo normale

7:1 minimo

Lo standard più alto, che richiede un rapporto di contrasto 7:1. Garantisce la massima leggibilità per gli utenti ipovedenti.

AAA Testo grande

4,5:1 minimo

Richiede 4,5:1 per il testo grande al livello AAA. Fornisce accessibilità migliorata per gli utenti ipovedenti che leggono testo di grandi dimensioni.

Consigli per il design del colore accessibile

1

Inizia dal contrasto

Scegli i colori del testo e dello sfondo tenendo conto del contrasto fin dall'inizio. È molto più facile pianificare i colori accessibili che correggere i problemi in seguito quando l'intero design è costruito.

2

Non fare affidamento solo sul colore

Usa icone, pattern, sottolineature o etichette insieme al colore per trasmettere informazioni importanti. Non tutti gli utenti percepiscono i colori allo stesso modo.

3

Testa su dispositivi reali

I colori sembrano diversi su monitor, telefoni e alla luce del sole. Ciò che supera gli strumenti digitali può ancora sembrare sbiadito sullo schermo del telefono in condizioni di luminosità elevata.

4

Usa anche la modalità scura

Se il tuo sito supporta la modalità scura, verifica i rapporti di contrasto per entrambi i temi. Ciò che funziona in modalità chiara può fallire in modalità scura.

5

Attenzione allo spessore del carattere

I caratteri sottili e leggeri riducono il contrasto percepito. Se usi caratteri leggeri (300 peso), aumenta il contrasto del colore per compensare la ridotta visibilità.

6

Verifica gli stati interattivi

Gli stati hover, focus e active spesso usano colori diversi. Verifica il contrasto per ogni stato interattivo, non solo per il colore predefinito.

Confronto verificatori di contrasto

FunzionalitàKleapWebAIMCoolorsAdobe Color
PrezzoGratuitoGratuitoFreemiumGratuito (con account Adobe)
Anteprima in tempo realeSì, testo live su sfondoSì, di baseSìSì
Colore accessibile più vicinoSì, suggerito automaticamenteNoNoParziale
Livelli WCAG testatiAA + AAA (normale + grande)AA + AAASolo AAAA + AAA
Costruttore siti integratoSì, alimentato dall'AINoNoNo
Pulsante scambia coloriSìNoNoNo
Coppia accessibile casualeSìNoNoNo

Domande frequenti

Cos'è un rapporto di contrasto del colore?+
Un rapporto di contrasto del colore è un valore numerico che rappresenta la differenza di luminanza tra due colori. Espresso come X:1 (ad es. 4,5:1), confronta la luminosità relativa del testo con il suo sfondo. Più alto è il rapporto, maggiore è il contrasto e più facile è leggere il testo.
Di quale rapporto di contrasto WCAG ho bisogno?+
Per la conformità WCAG 2.1 Livello AA (la conformità più ampiamente richiesta): testo normale necessita 4,5:1, testo grande (18pt o 14pt grassetto) necessita 3:1. Per il Livello AAA più alto: testo normale necessita 7:1, testo grande necessita 4,5:1.
Cosa conta come testo grande in WCAG?+
Il testo grande in WCAG è definito come testo di almeno 18 punti (24px) o 14 punti (18,67px) in grassetto. Il testo di intestazione tipico (h1, h2) solitamente si qualifica; il testo del corpo normale no.
WCAG si applica a immagini e icone?+
Sì, il Criterio di Successo WCAG 2.1 1.4.11 richiede che i componenti dell'interfaccia utente e gli oggetti grafici abbiano un rapporto di contrasto di almeno 3:1 contro i colori adiacenti.
Come si calcola il rapporto di contrasto?+
Il rapporto di contrasto usa la formula di luminanza relativa: (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza del colore più chiaro e L2 è la luminanza del colore più scuro. La luminanza relativa stessa è calcolata dai valori sRGB.
WCAG AA è sufficiente per il mio sito web?+
WCAG AA è lo standard a cui fanno riferimento la maggior parte delle leggi sull'accessibilità (ADA negli USA, EAA nell'UE). È sufficiente per la maggior parte dei siti web commerciali. Il Livello AAA è raccomandato per siti con utenti anziani o ipovedenti.
Cosa succede se i colori del mio brand non superano la verifica del contrasto?+
Hai diverse opzioni: regola leggermente la tonalità del tuo colore brand (scurire il colore del testo o schiarire lo sfondo), usa una versione più scura del tuo colore brand per il testo, aumenta la dimensione del carattere per qualificarti come 'testo grande' (3:1) o usa il colore brand solo per elementi decorativi.
Il contrasto conta per la modalità scura?+
Assolutamente. Gli stessi requisiti di contrasto WCAG si applicano indipendentemente dallo schema di colori. I siti in modalità scura spesso usano testo bianco o chiaro su sfondi scuri — verifica che il contrasto soddisfi i requisiti WCAG.
Gli utenti daltonici vedono abbastanza contrasto?+
Gli alti rapporti di contrasto aiutano significativamente gli utenti daltonici, ma non risolvono tutti i problemi di accessibilità del colore. Evita di affidarti solo sulle distinzioni rosso-verde (il tipo di daltonismo più comune) e usa sempre elementi aggiuntivi come icone, pattern o etichette.
Come testo il contrasto nel mio sito web esistente?+
Puoi usare il DevTools del browser (l'audit Lighthouse di Chrome include controlli di contrasto), estensioni come axe o WAVE per test a pagina intera, o inserire manualmente i tuoi colori in uno strumento di verifica del contrasto. La nostra verifica gratuita è il modo più veloce per testare combinazioni specifiche.

Costruisci un sito web accessibile con l'AI

Usa le tue combinazioni di colori accessibili per costruire un sito web completo e conforme all'accessibilità.

Inizia a costruire gratis

Related Free Tools

CSS Gradient Generator

Color Picker

Color Palette Generator

Button Generator

Verifica del Contrasto dei Colori Gratuita | Strumento Accessibilità WCAG 2026