Verificatore di contrasto
Calcola il rapporto di contrasto WCAG tra due colori con esiti AA e AAA per testo normale e grande, più un'anteprima dal vivo. Tutto avviene nel tuo browser.
Aa — The quick brown fox jumps over the lazy dog. 0123456789
Aa — Large & bold sample 24px
WCAG thresholds — normal text: AA ≥ 4.5, AAA ≥ 7; large text (≥ 24 px, or ≥ 18.7 px bold): AA ≥ 3, AAA ≥ 4.5.
Questo strumento gira interamente nel tuo browser. I tuoi dati non lasciano mai il dispositivo: non vengono caricati su nessun server.
Come si usa
- 1Digita un valore hex o rgb(), o usa il selettore, per il primo piano.
- 2Fai lo stesso per il colore di sfondo.
- 3Leggi il rapporto e gli esiti AA / AAA, o tocca un preset.
- 4Giudica l'abbinamento con i tuoi occhi nel blocco di anteprima.
Verificatore di contrasto
Inserisci un colore di primo piano e uno di sfondo — hex come #333 o #1F2937, oppure rgb()/rgba() — e leggi il rapporto di contrasto WCAG con due decimali, con l'esito immediato dei quattro soglie che contano: AA e AAA, testo normale e grande. Un'anteprima dal vivo mostra un paragrafo e un titolo nei colori reali.
Il calcolo usa la formula ufficiale della luminanza relativa di WCAG 2.x — la stessa del verificatore del W3C — quindi un 4.5 qui è un 4.5 ovunque. Tra i preset c'è una coppia grigia a 4.54:1 che mostra quanto è stretta la soglia AA.
Domande frequenti
Quale rapporto di contrasto serve per passare?
Secondo WCAG 2.x: il testo normale richiede 4.5:1 per AA e 7:1 per AAA. Il testo grande — almeno 24 px, o 18.7 px in grassetto — richiede 3:1 per AA e 4.5:1 per AAA. I componenti di interfaccia e la grafica richiedono 3:1.
Come si calcola il rapporto?
Ogni colore è linearizzato da sRGB e combinato nella luminanza relativa L = 0.2126·R + 0.7152·G + 0.0722·B; il rapporto è (L chiaro + 0.05) / (L scuro + 0.05), la formula esatta della specifica WCAG 2.x. Un alfa rgba() inferiore a 1 viene appiattito sul bianco prima del calcolo.
Strumenti correlati
Convertitore di colori
Incolla un colore in hex, rgb() o hsl() e ottieni tutti e tre i formati più una riga già pronta di tinte e ombre per il tuo design system.
Tutti gli strumenti →
Selettore colori
Scegli un colore dal campione o prendine uno direttamente dallo schermo con l'API EyeDropper — hex, RGB e HSL copiati con un clic.
Tutti gli strumenti →
Calcolatore di voti
Calcolatore di voti ponderato o a punti: aggiungi le verifiche, segui media e lettera in tempo reale e scopri esattamente cosa devi prendere all'esame finale.
Tutti gli strumenti →
Incorpora questo strumento
Metti questo strumento sul tuo sito con una riga: gira nel browser del visitatore.
<iframe src="https://zoyku.com/it/tools/contrast-checker?embed=1" width="100%" height="640" style="border:0;border-radius:16px" title="Zoyku — contrast-checker" loading="lazy"></iframe>