WCAG Contrast Checker
Testo normale (16px)
Testo Grande (24px Bold)
The quick brown fox jumps over the lazy dog
Rapporto di contrasto
17.06:1
Eccellente
Conformità WCAG
Domande Frequenti
Tutto quello che devi sapere sull'accessibilità e il contrasto WCAG
Cos'è il contrasto WCAG?
Le linee guida WCAG (Web Content Accessibility Guidelines) definiscono standard di contrasto per garantire che il testo sia leggibile per persone con disabilità visive. Il contrasto è calcolato come rapporto tra la luminanza del colore più chiaro e quello più scuro, con un range da 1:1 (nessun contrasto) a 21:1 (bianco su nero).
Qual è il rapporto di contrasto minimo richiesto?
WCAG 2.1 Livello AA richiede: 4.5:1 per testo normale, 3:1 per testo grande (≥18pt o ≥14pt grassetto) e componenti UI. Livello AAA richiede: 7:1 per testo normale, 4.5:1 per testo grande.
Come migliorare il contrasto?
Per aumentare il contrasto: scurisci il testo (usa nero o grigio scuro invece di grigio chiaro), schiarisci o scurisci lo sfondo, evita colori simili in valore di luminosità. Strumenti come WCAG Contrast Checker o le DevTools del browser possono indicare aree problematiche.
Qual è il rapporto di contrasto minimo richiesto dalle WCAG?
Il livello AA chiede 4.5:1 per il testo normale e 3:1 per il testo grande e i componenti dell'interfaccia. Il livello AAA sale a 7:1 per il testo normale e 4.5:1 per il testo grande.
Come si calcola il rapporto di contrasto tra due colori?
Il rapporto di contrasto si ricava dalla luminanza relativa dei due colori: luminanza più chiara più 0.05, diviso luminanza più scura più 0.05. I valori vanno da 1:1 a 21:1, cioè nero su bianco.
Quando un testo è considerato grande dalle WCAG?
Le WCAG considerano grande il testo da 18pt in su, oppure da 14pt se in grassetto. Al testo grande basta un rapporto di 3:1 per il livello AA, contro il 4.5:1 richiesto al testo normale.