1. Inserisci i colori
Inserisci il colore del testo è il colore dello sfondo in HEX, RGB o HSL.
Verifica il contrasto dei colori e la leggibilità secondo WCAG
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.
Loading tool editor...
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:
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 - il più comune nel web design. Inizia con # e contiene 3 o 6 caratteri (cifre 0-9 e lettere A-F).
#fff- bianco (forma abbreviata)#ffffff- bianco (forma completa)#1a73e8- blu
AATesto normale: min. 4,5:1 - Testo grande: min. 3:1 - Icone: min. 3:1
AAATesto normale: min. 7:1 - Testo grande: min. 4,5:1
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 18px (o 14px in grassetto). 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: titoli, pulsanti, evidenziazioni.
- 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 e il minimo richiesto dalle normative di accessibilità digitale in molti paesi, inclusa la direttiva europea sull'accessibilità dei siti web. 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?
| Feature | 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 | ||
| Legalmente obbligatorio (direttiva UE) | ||
| Richiesto da ADA / Sezione 508 (USA) | ||
| Richiesto da UK Equality Act 2010 | ||
| Consigliato per contenuti essenziali |
Livello AA (minimo)
- 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
- Legalmente obbligatorio (direttiva UE)
- Richiesto da ADA / Sezione 508 (USA)
- Richiesto da UK Equality Act 2010
- Consigliato per contenuti essenziali
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
- Legalmente obbligatorio (direttiva UE)
- Richiesto da ADA / Sezione 508 (USA)
- Richiesto da UK Equality Act 2010
- Consigliato per contenuti essenziali
Risoluzione dei problemi del verificatore di contrasto
Messaggio di errore formato colore
Verifica il formato del colore. Un codice HEX deve iniziare con # e contenere 3 o 6 caratteri (ad es. #fff o #ffffff). Per il formato RGB, verifica che i valori siano separati da virgole e compresi tra 0 e 255.
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 mostrera 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 eta e capacità visive diverse.Negozi online
Prezzi, pulsanti Acquista, informazioni prodotto. Una leggibilità scarsa può significare ordini persi.Presentazioni
Le diapositive proiettate hanno spesso 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 eta.Menu di ristoranti
Spesso stampati su carta colorata o con font decorativi: e facile ottenere un contrasto troppo basso.
leggibilità dei colori per le persone daltoniche
Il daltonismo è un disturbo della percezione dei colori che colpisce circa l'8% degli uomini e lo 0,5% delle donne. Le persone daltoniche possono avere difficolta a distinguere alcune coppie di colori, anche se il contrasto di luminosità è sufficiente.
Tipi più comuni di daltonismo:
- Deuteranopia - difficolta a distinguere il verde dal rosso (forma più comune)
- Protanopia - difficolta a percepire il rosso
- Tritanopia - difficolta 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, e 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.
Requisiti di accessibilità in Italia
L’Italia ha una delle legislazioni sull’accessibilità digitale più consolidate d’Europa:
- Legge Stanca (L. 4/2004) - impone l’accessibilità dei siti web della pubblica amministrazione secondo le linee guida AgID, basate sulle WCAG 2.1 AA.
- Decreto Legislativo 106/2018 - recepisce la direttiva UE sull’accessibilità web, estendendo gli obblighi a enti pubblici e concessionari di servizi pubblici.
- Obbligo per il settore privato (2025) - dal giugno 2025 le aziende con fatturato superiore a 500 milioni di euro devono rendere accessibili i propri servizi digitali. L’AgID è l’organismo di vigilanza.
- Legge Europea sull’Accessibilità (EAA) - estende ulteriormente gli obblighi a e-commerce, servizi bancari, trasporti e piattaforme multimediali.
Il rapporto di contrasto minimo di 4,5:1 per il testo normale e 3:1 per il testo grande è richiesto da tutte le normative citate.
Cosa rende speciale questo verificatore?
Valutazione oggettiva basata su formula matematica
Il rapporto di contrasto e calcolato con la formula WCAG: il risultato non dipende dalla configurazione del monitor ne dalla percezione individuale dei colori.conformità allo standard internazionale WCAG
I risultati corrispondono ai requisiti di WCAG 2.1, che costituiscono la base delle normative di accessibilità digitale nell'UE e in molti altri paesi.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. 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 (titoli, pulsanti) e le icone: non serve testare ogni tipo separatamente.
Domande frequenti sul verificatore di contrasto
Cos'e 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'e 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.
Quali formati di colore sono supportati?
Lo strumento supporta HEX (#000000), RGB (rgb(0,0,0)), RGBA, HSL (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.
La Legge Stanca impone un contrasto minimo?
Sì. La Legge 4/2004 e le linee guida AgID richiedono che i siti web della pubblica amministrazione rispettino le WCAG 2.1 AA, che includono un rapporto di contrasto minimo di 4,5:1 per il testo normale e 3:1 per il testo grande.
Dal 2025 anche i siti privati devono essere accessibili?
Sì. La Legge Europea sull'Accessibilità (EAA), in vigore da giugno 2025, estende gli obblighi al settore privato: e-commerce, servizi bancari, trasporti e piattaforme multimediali. In Italia, le aziende con fatturato superiore a 500 milioni di euro sono già soggette all'obbligo.
Come trovo i codici colore del mio sito web?
Nel browser (Chrome, Firefox, Edge) apri gli strumenti di sviluppo (clic destro > Ispeziona). Nella scheda Stili puoi vedere i colori della pagina. In alternativa, estensioni come ColorZilla permettono di selezionare il colore di qualsiasi elemento.
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.
Aiutaci a migliorare i nostri strumenti
Hai un'idea per una nuova funzionalità, hai trovato un bug o vuoi suggerire un altro strumento che renderebbe il tuo lavoro più facile? Scrivici – rispondiamo entro 24 ore.