Verificatore di Contrasto WCAG
Verifica il rapporto di contrasto tra testo e sfondo secondo gli standard WCAG AA e AAA — con anteprima live in testo normale e grande.
798 visualizzazioni
La veloce volpe marrone salta sopra il cane pigro
Esempio di testo grande 24px
Cosa significa il rapporto
Il rapporto di contrasto confronta la luminanza relativa di due colori, da 1:1 (identici) a 21:1 (nero su bianco). Il WCAG richiede 4,5:1 per il testo normale (AA) e 3:1 per il testo grande (≥24 px, o ≥18,7 px in grassetto); il livello AAA, più rigoroso, richiede 7:1 e 4,5:1. Componenti dell'interfaccia e grafica necessitano di 3:1 rispetto ai colori adiacenti.
Il calcolo linearizza ciascun canale sRGB, li pesa (L = 0,2126R + 0,7152G + 0,0722B) e calcola (L₁+0,05)/(L₂+0,05). L'intuito spesso inganna — un grigio medio #777 su bianco sembra perfettamente leggibile a molti occhi, ma ottiene 4,48:1, appena sotto la soglia AA. I margini esistono per gli utenti ipovedenti, la luce solare diretta e gli schermi economici.
Domande Frequenti
Scambiare testo e sfondo cambia il rapporto?
No — la formula mette sempre il colore più chiaro al numeratore, quindi il rapporto è simmetrico. La leggibilità può comunque sembrare diversa in modo soggettivo (l'alone del testo chiaro su sfondo scuro), ma il punteggio WCAG è identico.
Cosa conta come testo grande?
24 px (18 pt) normale o circa 18,7 px (14 pt) in grassetto e oltre. Il testo grande richiede solo 3:1 in AA perché i caratteri più grandi restano leggibili anche con un contrasto minore.
Il mio colore del brand non supera il test — cosa faccio?
Tienilo per gli elementi decorativi e scurisci o schiarisci il suo uso nel testo finché non supera il test; una scala di tinte/ombreggiature aiuta. Il testo segnaposto e gli stati disabilitati sono esenti dal requisito, ma è comunque bene mantenerli ragionevoli.
Strumenti Simili
Segnala un Problema
Verificatore di Contrasto WCAG