Verificatore di contrasto dei colori

Cos'è Verificatore di contrasto dei colori?

Il Verificatore di contrasto dei colori è uno strumento online gratuito per il contrasto WCAG e APCA, pensato per designer, sviluppatori e tester di accessibilità. Accetta colori in HEX (#rgb, #rrggbb e #rrggbbaa a 8 cifre con alfa), rgb()/rgba() e hsl()/hsla(), compone un primo piano traslucido sullo sfondo prima di misurare e riporta sia il rapporto WCAG 2.1 (da 1:1 a 21:1) sia il punteggio di contrasto di luminosità APCA Lc. Segnala il livello AA di WCAG 2.1 (4.5:1 normale, 3:1 grande) e AAA (7:1 normale, 4.5:1 grande), aggiunge un badge 3:1 per componenti d'interfaccia e grafica non testuali e può suggerire il primo piano conforme più vicino — regolando solo la sua luminosità fino a raggiungere AA o AAA — che applichi con un clic.

Come usare Verificatore di contrasto dei colori

1. Inserisci il colore di primo piano (testo) come HEX, rgb() o hsl() — HEX a 8 cifre o rgba con alfa sono accettati — oppure fai clic sul selettore di colore.
2. Inserisci il colore di sfondo allo stesso modo; un primo piano semitrasparente viene composto sopra di esso (e lo sfondo su bianco) prima di misurare il contrasto.
3. Usa il pulsante Scambia per invertire primo piano e sfondo in qualsiasi momento.
4. Leggi il rapporto di contrasto WCAG 2.1 e il punteggio APCA Lc mostrato accanto.
5. Controlla i badge AA e AAA per testo normale e grande, oltre al badge 3:1 per componenti d'interfaccia e grafica.
6. Se una coppia non supera, guarda il colore AA o AAA conforme più vicino e fai clic su Applica per aggiornare il primo piano.

Esempi

Primo piano #595959, Sfondo #ffffff

Rapporto 7.00:1 con un APCA Lc alto — supera AA e AAA per testo normale e grande

Primo piano #00000080 (nero al 50%) su #ffffff

Prima composto in un grigio pieno, poi si calcolano il rapporto WCAG e l'APCA Lc

Primo piano #999999 su #ffffff — 2.85:1, non supera AA

Apri il colore AA più vicino e fai clic su Applica per raggiungere 4.5:1 mantenendo la stessa tonalità

Domande frequenti

Quali rapporti di contrasto richiede WCAG?

Il livello AA di WCAG 2.1 richiede almeno 4.5:1 per testo normale e 3:1 per testo grande; il livello AAA richiede 7:1 e 4.5:1. I componenti d'interfaccia e gli oggetti grafici non testuali (SC 1.4.11) richiedono 3:1. Questo verificatore mostra un badge di superato/non superato per ciascuna di queste soglie.

Che cos'è il punteggio APCA Lc?

APCA (Accessible Perceptual Contrast Algorithm) è il metodo di contrasto proposto per WCAG 3. Fornisce un valore di contrasto di luminosità (Lc) da circa 0 a 108, dove più alto significa più contrasto, e tiene conto della polarità (scuro su chiaro vs chiaro su scuro). È mostrato accanto al rapporto WCAG 2.1 e usa livelli di indicazione propri anziché un unico superato/non superato.

Come funziona il suggerimento del colore conforme più vicino?

Mantiene tonalità e saturazione del primo piano e regola solo la luminosità, più chiara o più scura, finché il contrasto con lo sfondo raggiunge AA (4.5:1) o AAA (7:1); poi puoi applicarlo con un clic. Se lo sfondo è di tono medio e l'obiettivo non è raggiungibile, mostra invece il colore possibile più vicino.

Quali formati di colore posso inserire?

HEX (#rgb, #rrggbb, oltre a #rgba e #rrggbbaa a 8 cifre con alfa), rgb()/rgba() e hsl()/hsla(), con un selettore di colore nativo per ogni campo. Un primo piano semitrasparente viene composto sullo sfondo — che a sua volta viene appiattito su bianco — prima di calcolare il rapporto. I colori con nome non sono supportati.

I miei colori vengono inviati a un server?

No. Tutta l'analisi, la composizione e i calcoli di luminanza, rapporto e APCA vengono eseguiti interamente nel tuo browser con JavaScript — nessun colore viene caricato e nulla viene inviato a un server, quindi funziona in modo privato e persino offline una volta caricata la pagina.