Verificatore del contrasto colore

Controlla i rapporti di contrasto WCAG per colori di primo piano e sfondo, visualizza testo reale, vedi risultati AA e AAA e copia un report di accessibilità.

Controlla il contrasto WCAG prima di pubblicare una coppia di colori

Usa il Verificatore del contrasto colore per testare colori di primo piano e sfondo rispetto alle soglie di contrasto WCAG comuni. Inserisci o scegli colori, visualizza il tuo testo, imposta dimensione e peso del font e copia un report chiaro per revisioni design o tracciamento issue.

Il risultato include il rapporto di contrasto esatto, stati AA e AAA superati o non superati per testo normale, testo grande e componenti UI, più suggerimenti pratici per il primo piano.

Usalo quando

  • Scegli colori di testo e sfondo per pulsanti, card, dashboard, moduli o documentazione.
  • Controlli colori di brand prima di usarli in testo UI leggibile.
  • Verifichi se una dimensione font rientra nel testo grande secondo le soglie WCAG.
  • Copi una nota di accessibilità in un ticket, pull request o handoff di design.

Caricamento strumento...

FAQ del verificatore del contrasto colore

Quali soglie vengono controllate?

Lo strumento controlla 4.5:1 e 7:1 per testo normale, 3:1 e 4.5:1 per testo grande e 3:1 per componenti UI.

Il testo in grassetto cambia il risultato per testo grande?

Sì. Il testo in grassetto viene considerato grande a una dimensione in pixel più bassa del testo normale.

Posso trovare un colore accessibile vicino?

Sì. Il verificatore suggerisce una direzione di primo piano AA più vicina, conservando il tono originale per quanto praticabile.

Strumenti correlati