Verificatore di Contrasto Colori

Controlla il rapporto di contrasto WCAG tra colori di testo e sfondo, con livelli AA/AAA per testo normale e grande.

Colori
Controlla il rapporto di contrasto WCAG tra colori di testo e sfondo, con livelli AA/AAA per testo normale e grande.
Risultati
I colori trasparenti vengono miscelati con il bianco per il contrasto.
Rapporto di contrasto
18.88:1
AA (normale): SuperatoAA (grande): SuperatoAAA (normale): SuperatoAAA (grande): Superato
Primo piano
#111111
Sfondo
#FFFFFF
Aa Bb Cc 123
Anteprima
Testo normale / Testo grande
Testo normale

Aa Bb Cc 123

Testo grande

Aa Bb Cc 123

Che cos’è il contrasto di colore?

Il rapporto di contrasto misura la differenza di luminanza tra il testo (primo piano) e lo sfondo su una scala da 1:1 (nessun contrasto) a 21:1 (nero su bianco).

Questo strumento converte i colori in sRGB, fonde la trasparenza prima del confronto e usa la formula di luminanza relativa WCAG.

Soglie WCAG

  • AA: 4.5:1 per testo normale, 3:1 per testo grande.
  • AAA: 7:1 per testo normale, 4.5:1 per testo grande.
  • Testo grande: 18pt+ normale o 14pt+ in grassetto.
  • Componenti UI, icone e grafica dovrebbero puntare ad almeno 3:1.

Rapporti più alti migliorano la leggibilità, soprattutto con font sottili o dimensioni piccole.