IT
Deutsch
English
Français
EspañolVerifica contrasto gratuita secondo WCAG 2.2
Il suo contrasto è sufficiente? Verificato in un secondo.
Il contrasto insufficiente è l'errore di accessibilità più frequente in assoluto. Provi qui due colori secondo WCAG 2.2, oppure scansioni subito tutto il sito alla ricerca di problemi di contrasto.
Così appare il suo titolo
E così si legge un testo normale con questa combinazione. Tutti i suoi visitatori riescono a leggerlo senza sforzo?
Misurazione automatica secondo la formula WCAG, senza garanzia. Non sostituisce né una revisione manuale da parte di professionisti né una consulenza legale.
Scansionare tutto il sito alla ricerca di errori di contrasto
Le coppie di colori sono l'inizio. La scansione trova ogni punto con contrasto insufficiente su fino a 10 pagine, su desktop e smartphone, con i valori esatti.
Ci vogliono circa due minuti
Cos'è il contrasto dei colori e perché conta
Il contrasto decide se i suoi contenuti sono leggibili per tutti i visitatori. Ed è uno dei pochi aspetti dell'accessibilità che si può misurare con precisione.
Il contrasto dei colori descrive la differenza di luminosità tra due colori, per esempio tra il suo testo e lo sfondo dietro di esso. Le Web Content Accessibility Guidelines (WCAG) lo misurano come rapporto di contrasto su una scala da 1:1 (un colore sullo stesso colore) a 21:1 (nero su bianco). Il calcolo si basa sulla luminanza relativa dei due colori, cioè su quanto un colore appare luminoso all'occhio umano.
Perché conta: milioni di persone vivono con una disabilità visiva, e circa il quattro per cento della popolazione ha già solo un deficit nella visione dei colori. A questo si aggiunge la vita quotidiana, perché dalla metà dei quarant'anni la sensibilità al contrasto dell'occhio cala in modo misurabile. Ciò che a un occhio giovane su un monitor calibrato sembra elegante, per molti visitatori è semplicemente indecifrabile.
Allo stesso tempo, il contrasto insufficiente è l'errore di accessibilità più frequente di tutto il web: grandi rilevazioni come lo studio WebAIM Million lo trovano anno dopo anno su circa quattro home page su cinque. La causa raramente è cattiva volontà, ma una tendenza di design: il testo grigio chiaro su sfondo bianco sembra moderno e sobrio, ma fallisce regolarmente davanti all'asticella WCAG.
Infine, il contrasto è una questione legale: la legge europea sull'accessibilità richiede, tramite la norma europea EN 301 549, la conformità alle WCAG di livello AA, regole di contrasto comprese. Per le aziende interessate, un testo troppo pallido non è più un difetto estetico, ma una violazione misurabile.
Cosa significa il rapporto di contrasto
Le WCAG misurano il contrasto come rapporto tra la luminanza del testo e quella dello sfondo, da 1:1 (nessun contrasto) a 21:1 (nero su bianco).
4,5:1 per il testo normale (AA)
Il livello obbligatorio per il testo corrente secondo WCAG 1.4.3, e quindi il riferimento della legge europea sull'accessibilità. Il grigio su bianco è ciò che fallisce più spesso.
3:1 per testo grande e UI (AA)
Da 24 px (o 18,5 px in grassetto) basta 3:1. Lo stesso rapporto vale secondo WCAG 1.4.11 per i componenti di interfaccia: bordi dei pulsanti, icone, campi dei moduli.
7:1 per l'asticella più alta (AAA)
Il livello per persone con ipovisione più marcata. Non è un obbligo di legge, ma un buon obiettivo per i testi importanti.
Ciò che spesso si dimentica
Il contrasto vale anche per il testo sulle immagini, i placeholder dei moduli, i link nel testo e il contorno del focus. Esattamente i punti che la scansione trova.
Chi viene escluso da un contrasto debole
Gli errori di contrasto non colpiscono solo un piccolo gruppo marginale. Rendono il suo sito faticoso o inutilizzabile per una parte sorprendentemente grande dei visitatori.
Persone ipovedenti
Cataratta, malattie della retina o una forte ametropia riducono nettamente la sensibilità al contrasto. Il testo pallido si confonde allora con lo sfondo.
Deficit nella visione dei colori
Circa un uomo su dodici distingue a fatica il rosso dal verde. Se un link si differenzia dal testo solo per la tonalità, per questi visitatori è invisibile.
Visitatori anziani
Il cristallino si opacizza con gli anni e lascia passare meno luce. Verso i 60 anni l'occhio ha bisogno di molte volte più contrasto rispetto a un ventenne.
Chi naviga all'aperto
Il sole sullo schermo dello smartphone trasforma i contrasti deboli in grigio uniforme. Chi vuole ordinare in movimento e non riesce a leggere nulla, ordina altrove.
Utenti di schermi economici
Monitor datati, proiettori e pannelli economici mostrano i colori più spenti del MacBook del designer. Un contrasto al limite lì diventa definitivamente illeggibile.
Chiunque sia stanco
La sera, con poca luce o dopo otto ore di schermo, la resa al contrasto di ogni occhio cala. Un buon contrasto è comfort per tutti, non solo un obbligo per pochi.
I cinque errori di contrasto più frequenti
In migliaia di scansioni vediamo sempre gli stessi schemi. Controlli il suo sito proprio su questi cinque classici.
- 1
Testo grigio chiaro su sfondo bianco
Il classico intramontabile: un testo corrente in #999999 o più chiaro sembra discreto, ma su bianco raggiunge solo circa 2,8:1 invece del 4,5:1 richiesto. Date, didascalie e testi del footer sono i più colpiti.
- 2
Placeholder nei moduli
Il testo di esempio grigio nel campo è contenuto reale non appena è l'unica etichetta. I placeholder predefiniti di molti framework sono ben sotto il 4,5:1 e costringono i visitatori a indovinare cosa va nel campo.
- 3
Scritte bianche su foto e sfumature
Sulla zona scura dell'immagine il contrasto passa, su quella chiara non più. Poiché le immagini si spostano a seconda della larghezza dello schermo, il testo sulle immagini ha bisogno di uno scurimento o di una superficie di colore pieno dietro.
- 4
Link distinti solo dal colore
Un link azzurro pallido in un testo grigio ha bisogno di 3:1 di contrasto rispetto al testo circostante e in più di un secondo segnale come la sottolineatura. Altrimenti molti visitatori non trovano mai i suoi obiettivi di clic più importanti.
- 5
Pulsanti, icone e contorni del focus pallidi
Dalle WCAG 2.1 anche i componenti grafici richiedono 3:1: bordi dei pulsanti, contorni dei campi, icone e la cornice che mostra a chi usa la tastiera dove si trova. Esattamente i punti che le revisioni di design trascurano più spesso.
Migliorare il contrasto senza sacrificare il design
Un contrasto accessibile non significa nero su bianco. Di solito bastano piccoli interventi mirati.
Scurire i colori in modo mirato
Spesso manca solo un gradino: un grigio troppo chiaro diventa #595959, il blu aziendale pallido riceve una variante più scura per il testo. La palette mantiene il suo carattere, e la verifica qui sopra mostra subito quando basta.
Usare la dimensione del carattere come leva
Il testo grande da 24 px (o 18,5 px in grassetto) richiede solo 3:1 invece di 4,5:1. Un carattere un po' più grande o più marcato può rendere conforme un colore più chiaro, soprattutto per i titoli su superfici colorate.
Mai affidarsi solo al colore
Sottolineare i link, segnalare gli errori anche con icona e testo, non marcare i campi obbligatori solo in rosso. Dove esiste un secondo segnale, la comprensione non dipende più dalla visione dei colori.
Verificare tutti gli stati
Hover, focus, link visitati ed elementi disattivati hanno colori propri, che le style guide amano dimenticare. Verifichi ogni colore di stato singolarmente: la scansione li misura direttamente nello stato renderizzato.
Come verificare bene il contrasto
Quattro passi, dal singolo colore al sito pulito nel tempo.
- 1
Provare una coppia di colori
Inserisca sopra il colore del testo e dello sfondo. Il rapporto e tutti i livelli WCAG vengono calcolati all'istante, con anteprima dal vivo.
- 2
Scansionare il sito
La scansione controlla fino a 10 pagine e trova ogni punto con contrasto insufficiente, con i valori misurati.
- 3
Correggere con il report
Il report mostra ogni elemento interessato con il valore attuale e quello richiesto. Adattare i colori, riscansionare, spuntare.
- 4
Proteggersi nel tempo
Con il monitoraggio il suo sito viene ricontrollato regolarmente. Se durante un restyling si infila un grigio pallido, lo saprà subito.
Il quadro giuridico: dallo standard all'obbligo
Quattro normative si incastrano e trasformano una raccomandazione di design in un requisito di legge.
WCAG 2.2
Lo standard internazionale del W3C. Il criterio 1.4.3 richiede 4,5:1 per il testo normale (livello AA), l'1.4.6 richiede 7:1 (livello AAA), l'1.4.11 richiede 3:1 per componenti di interfaccia e grafiche.
EN 301 549
La norma europea per l'informatica accessibile. Adotta le WCAG di livello AA come riferimento vincolante ed è il metro tecnico dietro tutta la legislazione europea sull'accessibilità.
Legge europea sull'accessibilità
La direttiva UE 2019/882, in vigore dal 28 giugno 2025 per molti siti, negozi online e app. Garantisce requisiti comparabili in tutta l'UE: chi vende in Europa non può aggirare il livello AA da nessuna parte.
Recepimenti nazionali
Ogni Stato membro recepisce la direttiva, in Italia con il decreto legislativo 82/2022 e le sanzioni collegate. Il contrasto è la violazione più facile da dimostrare: basta una singola misurazione.
A che punto è il suo sito?
La scansione gratuita misura ogni contrasto del suo sito e mostra quanto dista dal livello AA.
Cosa può fare la misurazione automatica e cosa no
La scansione misura con precisione ogni caso verificabile a macchina: testo su sfondi uniformi, link, pulsanti, campi dei moduli e icone, ciascuno con i valori di colore realmente renderizzati su desktop e smartphone. Questo copre la grande maggioranza di tutti gli errori di contrasto.
Il testo su foto, video e sfumature non può essere valutato in modo univoco da una macchina, perché lo sfondo è diverso in ogni punto. Il report segnala quei punti per la revisione manuale, così nulla passa in silenzio come conforme quando un occhio umano dovrebbe ancora guardarlo.
Un'ultima nota: le valutazioni di questa pagina, per esempio sulla legge europea sull'accessibilità, sono prime valutazioni tecniche non vincolanti e non costituiscono consulenza legale. Per indicazioni vincolanti sui suoi obblighi si rivolga a un avvocato.
Domande frequenti sul contrasto dei colori
Quale rapporto di contrasto richiedono le WCAG?
Almeno 4,5:1 per il testo normale e almeno 3:1 per il testo grande (da 24 px, o 18,5 px in grassetto) secondo WCAG 1.4.3, livello AA. Anche i componenti grafici richiedono 3:1 (WCAG 1.4.11). Il livello AAA richiede 7:1 per il testo normale.
Verificare il contrasto è un obbligo di legge?
La legge europea sull'accessibilità rimanda alle regole di contrasto WCAG di livello AA tramite la norma EN 301 549. Un contrasto insufficiente è quindi una vera violazione per le aziende interessate, e una delle più facili da misurare.
Come si calcola il rapporto di contrasto?
Dalla luminanza relativa dei due colori con la formula WCAG: (L1 + 0,05) / (L2 + 0,05), dove L1 è il colore più chiaro. La verifica qui sopra usa esattamente questo calcolo, lo stesso degli strumenti delle autorità.
Cosa conta come testo grande?
Secondo le WCAG, il testo da 18 punti (circa 24 px) conta come grande, il testo in grassetto già da 14 punti (circa 18,5 px). Per il testo grande basta un rapporto di 3:1 al livello AA. Le due righe di indicatori nella verifica qui sopra mostrano entrambe le valutazioni in parallelo.
Ci sono eccezioni al requisito di contrasto?
Sì: loghi e nomi di marchi, testi e grafiche puramente decorativi ed elementi disattivati sono esenti dai requisiti di contrasto. Attenzione però ai placeholder nei moduli: contano come contenuto reale e richiedono il 4,5:1 pieno.
Il mio design è gradevole, non basta?
Ciò che sembra leggibile a un designer con vista tipica può essere illeggibile per chi ha ipovisione; circa il quattro per cento della popolazione ha già solo un deficit nella visione dei colori. Per questo conta il rapporto misurabile, non l'impressione.
Serve una modalità contrasto o un widget in sovrimpressione?
Una modalità contrasto attivabile è un'aggiunta sensata, ma non sostituisce l'obbligo che la vista predefinita rispetti il livello AA. Le WCAG valutano ciò che tutti i visitatori vedono senza clic aggiuntivi. Colori scelti bene alla fonte restano sempre il primo passo.
La scansione trova tutti i problemi di contrasto?
Trova tutto ciò che è misurabile automaticamente: testo su sfondi uniformi, link, pulsanti, campi dei moduli. Il testo su foto o sfumature richiede in più un occhio umano, e il report segnala quei punti per la revisione manuale.
Verifichi il suo contrasto prima che lo facciano i suoi clienti.
Provi una coppia di colori qui sopra, scansioni il sito e riceva un report con i valori esatti. Gratis e senza installare nulla.
Alla verifica del contrasto