Rapporto di contrasto con risultati WCAG 2.2 AA e AAA per testo e interfaccia Accetta HEX, RGB, HSL, OKLCH e nomi di colore CSS, oltre ai selettori Fonde i colori trasparenti come fa il browser Anteprima dal vivo con titolo, testo, testo piccolo e un pulsante Suggerisce il colore più vicino che supera il test cambiando solo la luminosità

Verifica contrasto colori - Test WCAG AA e AAA

Cos'è il contrasto dei colori e perché conta?

Il rapporto di contrasto misura la differenza di luminosità percepita tra due colori, da 1:1 (identici) a 21:1 (nero su bianco). Le linee guida WCAG 2.2 richiedono almeno 4,5:1 per il testo normale e 3:1 per il testo grande e gli elementi di interfaccia al livello AA, e 7:1 e 4,5:1 al livello AAA. Circa un uomo su dodici ha un'alterazione della visione dei colori e molte persone leggono il telefono sotto il sole, quindi un testo poco contrastato esclude utenti reali. Leggi come l'European Accessibility Act e la Legge Stanca rimandano alle WCAG, rendendo il contrasto un obbligo per molti siti.

Funzionalità

• Rapporto di contrasto con risultati WCAG 2.2 AA e AAA per testo e interfaccia
• Accetta HEX, RGB, HSL, OKLCH e nomi di colore CSS, oltre ai selettori
• Fonde i colori trasparenti come fa il browser
• Anteprima dal vivo con titolo, testo, testo piccolo e un pulsante
• Suggerisce il colore più vicino che supera il test cambiando solo la luminosità

Istantaneo e privato

Tutti i calcoli avvengono nel browser. I colori dei design non ancora pubblicati non vengono inviati da nessuna parte.

Formula WCAG 2.2, 100% lato client.

Come usare: Verifica contrasto

1
Inserisci il colore del testo e quello dello sfondo scrivendo un qualsiasi colore CSS (#1e293b, rgb(), hsl(), oklch() o un nome) o usando i selettori di colore.
2
Leggi il rapporto di contrasto. Il risultato viene troncato, non arrotondato per eccesso, quindi 4,49:1 non risulta mai superato.
3
Controlla i cinque risultati WCAG: AA e AAA per testo normale e grande, più 3:1 per componenti come bordi dei campi, icone e anelli di focus.
4
Se un test fallisce, guarda il colore suggerito con la stessa tinta e luminosità corretta e clicca Usalo, oppure scambia i colori per provare l'inverso.

Esempi pratici

Testo segnaposto grigio

Il gray-400 di Tailwind (#9ca3af) su bianco arriva solo a 2,5:1 e non supera AA. Il gray-500 (#6b7280) raggiunge 4,8:1 e va bene per il testo.

Colore del brand sui pulsanti

Un blu del brand chiaro può superare il test per le etichette grandi (3:1) ma non per il testo piccolo. Controlla entrambi o scurisci lo sfondo finché il testo bianco non arriva a 4,5:1.

Palette per la modalità scura

Il bianco puro sul nero puro (21:1) può affaticare. Prova coppie più morbide come #e2e8f0 su #0f172a, che superano comunque AAA con circa 14:1.

Bordi dei moduli e icone

Il criterio WCAG 1.4.11 chiede 3:1 per il bordo dei campi e le icone significative. Un bordo #e5e7eb su bianco è molto al di sotto e rende i campi difficili da trovare.

Domande frequenti

Cosa conta come testo grande?+

Per le WCAG, testo di almeno 18 pt (24px) normale o 14 pt (circa 18,66px) grassetto. Il testo grande richiede solo 3:1 al livello AA perché i tratti spessi si leggono meglio.

Mi serve AA o AAA?+

AA è l'obiettivo legale standard per la maggior parte di siti e app. AAA è più severo ed è consigliato per letture lunghe, servizi pubblici e persone ipovedenti.

Il contrasto vale per loghi e pulsanti disattivati?+

No. Le WCAG esentano loghi, immagini decorative e controlli inattivi (disabled). Testo segnaposto, link e indicatori di focus sono inclusi.

E APCA e WCAG 3?+

APCA è un modello di contrasto più recente proposto per le future WCAG 3. È ancora una bozza, quindi oggi leggi e audit richiedono i rapporti delle WCAG 2.2.