Verificatore Contrasto Colori
Verificatore contrasto colori gratuito — verifica subito la conformità WCAG 2.2 AA e AAA. Anteprima live, simulazione daltonismo e suggerimenti colori...
Aggiornato maggio 2026
Revisionato da Rafael Duarte
Un buon contrasto cromatico garantisce che il testo sia leggibile da tutti, comprese le persone ipovedenti o daltoniche. Punta alla conformità WCAG 2.2 AA per rispettare gli standard di accessibilità previsti dalla legge.
Correzione dell'accessibilità
I tuoi colori sono conformi AA!
Nessuna correzione necessaria per il contrasto del testo normale.
Simulazione del daltonismo
Riferimento WCAG 2.2
| Criterio | Valore attuale | Soglia | Stato |
|---|---|---|---|
| Testo normale (AA) | 6.18:1 | 4.5:1 | SUPERATO |
| Testo normale (AAA) | 6.18:1 | 7:1 | NON SUPERATO |
| Testo grande (AA) | 6.18:1 | 3:1 | SUPERATO |
| Testo grande (AAA) | 6.18:1 | 4.5:1 | SUPERATO |
| Componenti UI (AA) | 6.18:1 | 3:1 | SUPERATO |
Come verificare il contrasto dei colori
Testo e sfondo: rapporto di contrasto e conformità WCAG in tempo reale
1. Imposta testo e sfondo
Scegli i colori dal selettore o digita il codice esadecimale a 6 cifre. Il pulsante di inversione scambia testo e sfondo in un clic.
2. Leggi rapporto e livelli
Il rapporto (da 1:1 a 21:1) compare con l'esito AA e AAA per testo normale, testo grande e componenti dell'interfaccia.
3. Correggi e simula il daltonismo
Se il testo normale non raggiunge AA, lo strumento propone una tonalità che arriva a 4,5:1; poi controlla la coppia con le simulazioni di daltonismo.
Più di un semplice calcolo del rapporto di contrasto
Strumenti pensati per chi progetta interfacce accessibili
Soglie WCAG 2.2 complete
Esito AA e AAA per testo normale (4,5:1 e 7:1), testo grande (3:1 e 4,5:1) e componenti dell'interfaccia (3:1).
Correzione automatica
Mantiene tinta e saturazione del colore del testo e ne cambia solo la luminosità fino a raggiungere 4,5:1, con applicazione in un clic.
Simulazione del daltonismo
Deuteranopia, protanopia, tritanopia e acromatopsia, con il rapporto di contrasto ricalcolato sui colori simulati.
Anteprima dal vivo
Titolo a 24px, testo a 14px, un pulsante pieno e uno a contorno mostrano la coppia di colori in un contesto reale.
Rapporto copiabile
Un clic sul valore, o Maiusc+Invio fuori dai campi, copia il rapporto nel formato 6.18:1, pronto per un report di audit.
Nessun invio di dati
Il calcolo avviene nel browser: puoi verificare anche la palette di un marchio non ancora presentato.
Rapporti di contrasto di riferimento
Valori calcolati con lo strumento, colore del testo su sfondo bianco #FFFFFF
Quando verificare il contrasto
Dal progetto grafico all'audit di accessibilità
Revisione di siti e app
Controlla testi, pulsanti, campi e icone prima del rilascio, quando correggere un colore costa ancora poco.
Obblighi di accessibilità
Pubbliche amministrazioni (Legge Stanca e linee guida AgID) e, dal 28 giugno 2025, molti servizi privati coperti dall'European Accessibility Act devono rispettare almeno il livello AA.
Colori del marchio
Scopri se il colore aziendale funziona come testo o solo come sfondo, e trova la variante più vicina che supera AA.
Tema scuro
Le stesse soglie valgono con testo chiaro su sfondo scuro: verifica ogni coppia del dark mode, non solo quella principale.
Utenti con daltonismo
Prima di approvare un grafico o un messaggio di errore rosso e verde, controlla con le simulazioni che i colori restino distinguibili.
Errori comuni sul contrasto dei colori
Applicare al testo la soglia dei componenti
Bordi di campi, icone e stati dei controlli richiedono 3:1, ma il testo normale ne richiede 4,5:1. Usare la soglia più bassa per il testo fa passare combinazioni che non sono conformi.
Fidarsi dell'occhio invece del numero
Due colori diversi per tinta possono avere luminosità quasi uguale: rosso e verde accesi sembrano contrastare, ma il rapporto può essere sotto 3:1.
Considerare "grande" qualsiasi titolo
Per le WCAG il testo è grande da 18 punti (circa 24px) o da 14 punti in grassetto (circa 18,7px). Un titolo a 20px non grassetto deve rispettare 4,5:1.
Aspettarsi che la correzione arrivi ad AAA
Il colore suggerito punta al minimo AA di 4,5:1. Se il progetto richiede AAA, scurisci o schiarisci ancora finché il rapporto non arriva a 7:1.
Ignorare il daltonismo perché si passa AA
Le WCAG misurano la luminanza, non la distinzione tra tinte: una coppia conforme può essere comunque confusa da chi ha una deuteranopia.
Perché usare questo verificatore di contrasto
Il testo a basso contrasto è il problema di accessibilità più diffuso: secondo il WebAIM Million 2026 è presente sull'83,9% delle home page analizzate. Qui non ottieni solo il numero, ma anche il colore corretto da applicare e la vista simulata per chi ha un deficit cromatico.
Il calcolo segue la formula della luminanza relativa delle WCAG ed è eseguito nel browser, senza inviare i colori a un server. Funziona allo stesso modo per temi chiari e scuri, indipendentemente da quale dei due colori sia il più luminoso.
Requisiti di contrasto WCAG 2.2
Livello AA (minimo richiesto) e AAA (avanzato)
Domande frequenti
Per il livello AA servono 4,5:1 per il testo normale e 3:1 per il testo grande; il livello AAA alza le soglie a 7:1 e 4,5:1. Componenti dell'interfaccia e grafica informativa richiedono almeno 3:1 rispetto ai colori adiacenti.
Riferimenti
Il testo ufficiale in italiano delle linee guida, con il criterio 1.4.3 Contrasto (minimo).
Spiegazione (in inglese) del criterio di contrasto minimo, con la formula della luminanza relativa.
La pagina dell'Agenzia per l'Italia Digitale su normativa, linee guida e obblighi di accessibilità.
Strumenti correlati
- Convertitore di Colori Design Converti colori tra HEX, RGB, HSL e CMYK all'istante. Selettore di colori gratuito con controllo contrasto WCAG e generatore di palette.
- Generatore di Palette Colori Design Genera palette colori armoniose da qualsiasi colore base. Scegli armonia Analoga, Complementare, Triadica o Tetradica — esporta come CSS variables o JSON.
- Palette Colori da Immagine Design Estrai palette colori da qualsiasi immagine — ottieni codici HEX, RGB, HSL ed esporta come CSS variables, Tailwind, JSON o PNG. 100% nel browser, senza upload.
- Generatore CSS Box Shadow — Neumorfismo, Glassmorfismo e Tailwind Design Generatore CSS box shadow gratuito con anteprima in tempo reale. Crea ombre, effetti neumorfismo e glassmorfismo. Esporta in CSS, Tailwind o variabili CSS.
- Generatore CSS Flexbox Design Generatore CSS Flexbox gratuito: anteprima live, export Tailwind, CSS e React/JSX in schede, 11 layout predefiniti e proprietà dei singoli elementi incluse nel codice. Senza registrazione.
