Chromatica Tools · Colori · Contrasti · Accessibilità

Verifica il contrasto dei colori secondo WCAG

Il rapporto di contrasto misura quanto il colore del testo si distingue dallo sfondo, da 1:1 (nessuna differenza) a 21:1 (nero su bianco). Per le WCAG il testo normale deve raggiungere almeno 4,5:1 (livello AA) e il testo grande almeno 3:1: questo strumento calcola il rapporto, dice se i livelli AA e AAA sono superati e propone colori alternativi.

Come si usa

  1. Scegli il colore del testo e quello dello sfondo con il selettore o scrivendo il codice HEX.
  2. Leggi il rapporto di contrasto e l'esito per i livelli AA e AAA, per testo normale e testo grande.
  3. Se il contrasto non basta, scegli una delle alternative di colore proposte e riprova.
  4. Copia o scarica i colori in CSS, JSON o HTML.

Domande frequenti

Qual è il contrasto minimo richiesto dalle WCAG?

Il livello AA richiede almeno 4,5:1 per il testo normale e 3:1 per il testo grande. Il livello AAA richiede 7:1 per il testo normale e 4,5:1 per il testo grande. Per i componenti dell'interfaccia e gli elementi grafici necessari a capire il contenuto, le WCAG 2.1 chiedono almeno 3:1 (criterio 1.4.11).

Cosa si intende per testo grande?

Per le WCAG è un testo di almeno 18 punti (circa 24 pixel) oppure di almeno 14 punti in grassetto (circa 18,7 pixel).

Come si calcola il rapporto di contrasto?

Si calcola la luminanza relativa dei due colori e si applica la formula (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza del colore più chiaro e L2 quella del più scuro. Chromatica Tools usa la formula indicata dalle WCAG.

I miei colori vengono inviati a un server?

No. Il calcolo avviene nel tuo browser e i colori non vengono salvati.

Altri strumenti di Chromatica Tools