Strumenti per i colori

Verificatore di Contrasto

Verifica i rapporti di contrasto WCAG tra due colori qualsiasi. Visualizza i badge di promosso/bocciato per AA e AAA su testo normale e grande, con anteprima dal vivo.

Primo piano (testo)

Sfondo

Esempio di intestazione grande

Questo è testo di paragrafo a grandezza normale — la riga che leggeresti per paragrafi e testi di moduli.

Questo è un testo in piccolo — didascalie, note a piè di pagina, testi di aiuto.

Rapporto di contrasto

WCAG AA — Normale --

WCAG AA — Grande --

WCAG AAA — Normale --

WCAG AAA — Grande --

Cos'è il rapporto di contrasto?

Il rapporto di contrasto è un numero da 1:1 (nessun contrasto) a 21:1 (nero puro su bianco puro) che descrive quanto un colore di primo piano sia distinguibile dal suo sfondo. Le Web Content Accessibility Guidelines (WCAG) usano questo numero come riferimento legale per stabilire se un testo è leggibile da persone con ipovisione, daltonismo o da chiunque legga su uno schermo con riflessi. Più alto è il rapporto, più sicura è la scelta — e più universalmente leggibile sarà la tua interfaccia.

Come usare questo verificatore

Scegli il colore del testo nel selettore di primo piano e la superficie dietro di esso nel selettore di sfondo — oppure incolla direttamente i codici hex. L'anteprima dal vivo si ridipinge in tempo reale così puoi vedere esattamente cosa vedranno gli utenti, e i quattro badge ti dicono a colpo d'occhio quali livelli WCAG superi. Usa il pulsante Scambia per invertire la coppia quando stai abbozzando una variante in dark mode o testando pulsanti call-to-action invertiti.

Buone pratiche

Punta come minimo assoluto a AA Normale (4,5:1) sui testi di paragrafo, e mira a AAA Normale (7:1) quando l'accessibilità è un valore del brand. Non rincorrere il minimo indispensabile — i rapporti al limite falliscono su monitor economici e all'aperto. Testa i tuoi colori reali alla dimensione effettiva con cui andrai in produzione, non approssimazioni dalla palette del brand. Ricorda che gli stati disabilitati, i testi placeholder e le copy pubblicitarie contano comunque come testo — anch'essi hanno bisogno di contrasto. Non usare mai il colore da solo per veicolare un significato; abbinalo a icone, sottolineature o etichette.

La matematica dietro il rapporto

Le WCAG calcolano il contrasto a partire dalla luminanza relativa, non dai valori RGB grezzi. Ogni canale viene prima linearizzato dall'sRGB — i valori sotto 0,03928 sono divisi per 12,92, gli altri passano per ((c + 0,055) / 1,055)^2,4. La luminanza è quindi L = 0,2126·R + 0,7152·G + 0,0722·B, ponderata perché l'occhio umano è più sensibile al verde e meno al blu. Il rapporto è (L_{più chiara} + 0,05) / (L_{più scura} + 0,05). Il termine + 0,05 modella la luce ambientale riflessa sugli schermi reali ed è ciò che limita il massimo a 21:1.

Livelli di conformità WCAG a colpo d'occhio

AA Normale: minimo 4,5:1 per il testo di paragrafo sotto i 18pt (o 14pt grassetto). AA Grande: 3:1 per testi 18pt+ (o 14pt+ grassetto). AAA Normale: 7:1 — il livello potenziato consigliato per i siti che mirano allo standard di leggibilità più alto. AAA Grande: 4,5:1 — testo grande sotto la soglia potenziata. I componenti UI non testuali (icone, anelli di focus, bordi dei moduli) richiedono almeno 3:1 contro la superficie adiacente per soddisfare il WCAG 2.1 SC 1.4.11.

Domande frequenti

Cosa significa "testo grande" nelle WCAG?

Per testo grande si intende qualsiasi testo dai 18pt in su, o dai 14pt in su se in grassetto — circa 24px e 18,66px in pixel CSS. Il motivo: i caratteri più grandi hanno tratti più spessi e maggiore massa visiva, quindi restano leggibili a contrasti più bassi rispetto al testo di paragrafo a interlinea fitta. Se il tuo design system mescola pesi regolari e grassetto alla stessa dimensione, valutali separatamente.

Questo strumento invia i miei colori a un server?

No. Ogni calcolo del contrasto avviene nel tuo browser tramite matematica JavaScript standard — nessuna richiesta di rete parte quando cambi gli input. Puoi confermarlo aprendo DevTools → Network e trascinando il selettore. Gli audit dei colori del brand sono sicuri da eseguire qui anche su palette non ancora rilasciate.

Perché i miei colori falliscono a 4,49:1 ma passano a 4,50:1?

Le WCAG definiscono le proprie soglie come minimi inclusivi — 4,5:1 significa almeno 4,5, non strettamente maggiore. Arrotondiamo a due decimali per la visualizzazione ma confrontiamo internamente il numero a precisione piena, quindi un risultato di 4,4998 fallisce per un margine minimo anche se il badge mostra 4,50. Se sei così vicino, sposta un canale di uno o due punti per superare la soglia in sicurezza.

E gli elementi non testuali come icone o bordi dei moduli?

Il WCAG 2.1 SC 1.4.11 richiede un contrasto minimo di 3:1 per i componenti UI grafici — tratti delle icone, bordi degli input, indicatori di focus, contorni dei pulsanti. Usa questo verificatore sul colore di primo piano dell'icona contro la sua superficie; se l'icona è multicolore, valuta il tratto più contrastante che trasmette il significato.

L'AAA conta davvero per i siti web tipici?

Il livello AA è il pavimento legale nella maggior parte delle giurisdizioni. L'AAA è aspirazionale e non sempre mantenibile su un'intera palette senza sacrificare l'identità del brand. Centra l'AAA sui testi di paragrafo ogni volta che puoi — è lì che il dividendo di leggibilità è più grande — e accetta l'AA su hover di accento e intestazioni grandi.

I nomi di colore come "red" o "blue" sono supportati?

I selettori e gli input hex gestiscono i codici hex a 6 e 3 cifre. Per i nomi di colore CSS, usa il nostro strumento Named Colors per cercare prima l'equivalente hex, poi incollalo qui.

Verificatore di Contrasto