Calcolatore Rapporto di Contrasto Colore (WCAG)
Calcolatore Rapporto di Contrasto Colore (WCAG)
Inserisci un colore in primo piano (testo) e un colore di sfondo come codici hex. Questo calcola il loro rapporto di contrasto usando la formula WCAG e ti dice quali livelli di conformità di accessibilità (AA, AAA) supera la combinazione.
- Formula: Rapporto di Contrasto = (L1 + 0.05) ÷ (L2 + 0.05), dove L1 e L2 sono la luminanza relativa del colore più chiaro e più scuro, secondo la formula WCAG 2.x.
- Soglie WCAG: AA richiede 4.5:1 per il testo normale e 3:1 per il testo grande (18pt+ o 14pt+ grassetto); AAA richiede 7:1 per il testo normale e 4.5:1 per il testo grande.
- Funziona interamente nel tuo browser: i tuoi colori vengono calcolati localmente usando JavaScript e non vengono mai inviati a un server.
Cosa conta come "testo grande" per la soglia AA/AAA inferiore?
18pt (24px) peso normale o 14pt (~18.5px) grassetto o più grande — il testo grande è più facile da leggere a un contrasto inferiore.
I miei colori falliscono WCAG AA — cosa dovrei cambiare?
Scurisci il colore più scuro, schiarisci quello più chiaro, o entrambi — anche piccoli aggiustamenti di luminosità possono aumentare significativamente il rapporto di contrasto.
Calcolatore Rapporto di Contrasto Colore (WCAG)
Inserisci un colore in primo piano (testo) e un colore di sfondo come codici hex. Questo calcola il loro rapporto di contrasto usando la formula WCAG e ti dice quali livelli di conformità di accessibilità (AA, AAA) supera la combinazione.
- Formula: Rapporto di Contrasto = (L1 + 0.05) ÷ (L2 + 0.05), dove L1 e L2 sono la luminanza relativa del colore più chiaro e più scuro, secondo la formula WCAG 2.x.
- Soglie WCAG: AA richiede 4.5:1 per il testo normale e 3:1 per il testo grande (18pt+ o 14pt+ grassetto); AAA richiede 7:1 per il testo normale e 4.5:1 per il testo grande.
- Funziona interamente nel tuo browser: i tuoi colori vengono calcolati localmente usando JavaScript e non vengono mai inviati a un server.
Cosa conta come "testo grande" per la soglia AA/AAA inferiore?
18pt (24px) peso normale o 14pt (~18.5px) grassetto o più grande — il testo grande è più facile da leggere a un contrasto inferiore.
I miei colori falliscono WCAG AA — cosa dovrei cambiare?
Scurisci il colore più scuro, schiarisci quello più chiaro, o entrambi — anche piccoli aggiustamenti di luminosità possono aumentare significativamente il rapporto di contrasto.