Nessun upload, 100% locale, nessun account

Verificatore di contrasto WCAG

Digita o scegli due colori e vedi subito il rapporto di contrasto WCAG, con badge di superamento AA/AAA per testo normale e grande.

Come funziona Verificatore di contrasto

Questo strumento calcola il rapporto di contrasto WCAG tra due colori e indica se la coppia supera il livello AA o AAA per testo normale, testo grande e componenti UI non testuali. Tutto viene calcolato localmente nel tuo browser; i colori inseriti non vengono mai caricati.

Scritto da Bastien Sulyan

Come usare Verificatore di contrasto, passo dopo passo

  1. Inserisci o scegli il colore di primo piano (testo).
  2. Inserisci o scegli il colore di sfondo.
  3. Leggi il rapporto di contrasto e i badge AA/AAA per testo normale, testo grande e componenti UI non testuali.
  4. Usa Scambia colori per verificare la coppia al contrario.

Casi d'uso comuni

  • Verificare il colore principale di un marchio su bianco o nero prima di pubblicare un componente pulsante.
  • Verificare che un testo di corpo grigio spento superi ancora l'AA su uno sfondo di card chiaro.
  • Confermare che il colore di un link all'interno di un paragrafo raggiunga la soglia 4,5:1 per testo normale.
  • Verificare se un titolo grande e di peso più leggero superi comunque la soglia più permissiva di 3:1 per testo grande.

Domande frequenti

Questo strumento invia i miei colori a un server?

No, il calcolo avviene interamente nel tuo browser con JavaScript; nulla di ciò che inserisci viene caricato.

Che rapporto di contrasto serve per AA o AAA?

WCAG 2.x richiede 4,5:1 per l'AA su testo normale, 7:1 per l'AAA su testo normale, 3:1 per l'AA su testo grande e 4,5:1 per l'AAA su testo grande.

Cosa si intende per testo grande?

Almeno 24px (18pt) in peso normale, o circa 18,7px (14pt) in grassetto; tutto ciò che è più piccolo usa le soglie del testo normale.

Perché scambiare primo piano e sfondo non cambia il rapporto?

La formula del rapporto è simmetrica: confronta solo la luminanza più chiara e quella più scura, non quale colore viene usato per il testo. Scambiarli resta comunque utile perché indica se la coppia funziona anche con i ruoli invertiti, ad esempio testo scuro su un chip chiaro rispetto a testo chiaro su un chip scuro.

Superare l'AA garantisce che il mio design sia accessibile?

No. Il contrasto è uno dei tanti criteri di successo WCAG. La scelta dei colori per persone con deficit della visione cromatica, la visibilità del focus, il ridimensionamento del testo e la navigazione da tastiera sono controlli separati; il simulatore di daltonismo di questo sito ne copre uno.

È uno strumento ufficiale del W3C o di WebAIM?

No. Implementa in modo indipendente la formula pubblica di contrasto WCAG 2.x e non è affiliato al W3C né a nessun'altra organizzazione per l'accessibilità.

Strumenti correlati

Mantieni tutto locale, esplora gli strumenti complementari.

Tutti gli strumenti per sviluppatori