ItalianoIT

Verifica contrasto colori – contrast checker WCAG

Scegli un colore per il testo e uno per lo sfondo: rapporto di contrasto e risultati di accessibilità compaiono subito.

Testi e file restano nel tuo browser: non viene inviato nulla a un server.

Rapporto di contrasto-
  • Testo normale AA (4,5:1)-
  • Testo normale AAA (7:1)-
  • Testo grande AA (3:1)-
  • Testo grande AAA (4,5:1)-
  • Componenti dell’interfaccia e grafici AA (3:1)-

Un testo grande misura almeno 24 px, o circa 18,7 px in grassetto.

Anteprima

Ecco come appare un titolo grande

Il testo corrente richiede almeno 4,5:1 per leggersi comodamente. Provalo anche su uno schermo piccolo o in piena luce.

Piccolo testo di aiuto · 13 px

PulsanteCampo di inserimento
Colori conformi suggeriti
Cambia il testo in -
Cambia lo sfondo in -

Come si usa

  1. Scegli i colori di testo e sfondo con i campioni o inserisci codici come #fff o rgb(…). I colori semitrasparenti vengono prima fusi con lo sfondo.
  2. Vedi il rapporto di contrasto e se il livello AA è raggiunto per il testo normale (4,5:1), il testo grande (3:1) e i componenti dell’interfaccia (3:1), oltre ai livelli AAA, più severi.
  3. Se un test non passa, “Colori conformi suggeriti” propone il colore più vicino della stessa tonalità, modificando solo la luminosità. “Applica” lo imposta.
  4. Entrambi i colori sono nell’indirizzo della pagina: copia il link per condividerlo con il tuo team.

Domande frequenti

Cosa significano AA e AAA?

Sono livelli di conformità delle WCAG (Web Content Accessibility Guidelines). Il testo normale richiede 4,5:1 per il livello AA e 7:1 per il livello AAA. In Italia la Legge Stanca e le Linee guida AgID sull’accessibilità, pensate soprattutto per la pubblica amministrazione, si basano sul livello AA delle WCAG, e la direttiva europea sull’accessibilità estende dal giugno 2025 questi requisiti a molti servizi privati.

Come si calcola il rapporto di contrasto?

Lo strumento ricava la luminanza relativa dei due colori, poi divide (la più chiara + 0,05) per (la più scura + 0,05). Due colori identici danno 1:1, nero su bianco 21:1. Il risultato viene troncato invece che arrotondato, così un valore appena sotto una soglia non sembra mai conforme.

Quando si applica la regola dei componenti dell’interfaccia?

Gli elementi senza testo, come i bordi dei pulsanti, i contorni dei campi e le icone, richiedono almeno 3:1 rispetto ai colori vicini (WCAG 1.4.11).

Strumenti simili

Selettore di coloriHEX, RGB, HSL e CMYK insiemePalette per Tailwind CSSUn colore, una scala 50–950Colore da immagineColori e palette di un’immagineGeneratore di ASCII artTesto e foto in caratteri

Tutti gli strumenti