Verifica i rapporti di contrasto tra testo e sfondo per la conformità all'accessibilità.
Garantire un contrasto visivo sufficiente tra il testo e lo sfondo è uno dei requisiti cardine dell'accessibilità digitale sanciti dalle linee guida internazionali Web Content Accessibility Guidelines (WCAG 2.1 e 2.2) e dalle normative europee sull'accessibilità (European Accessibility Act). Un rapporto di contrasto insufficiente impedisce a persone ipovedenti, con daltonismo o semplicemente a utenti che consultano schermi sotto la luce diretta del sole di leggere agilmente i contenuti dell'interfaccia utente (UI).
Prendiamo come esempio la palette grafica di un'applicazione web in cui il testo principale è impostato sul colore scuro #1E293B (ardesia profondo) su uno sfondo chiaro #F8FAFC: il calcolatore rileva un rapporto di contrasto di 13.8:1, superando brillantemente sia il livello AA che il livello massimo AAA. Se invece analizziamo un testo secondario grigio chiaro #94A3B8 sullo stesso sfondo, il rapporto risulta di appena 2.8:1, fallendo tutti i criteri WCAG sia per testo normale che per testo grande. Lo strumento segnala immediatamente la non conformità e suggerisce con uno slider cromatico la tonalità minima più scura (es. #64748B) necessaria per raggiungere la soglia legale di 4.5:1.
La conversione dei canali colore, il calcolo della luminanza relativa e i controlli di conformità operano al 100% in locale nel tuo browser. I tuoi codici colore HEX, palette del brand e mockup di design non vengono mai condivisi all'esterno, proteggendo la riservatezza dei tuoi progetti visivi.
Rapporto di Contrasto = (L1 + 0.05) / (L2 + 0.05) ; L = 0.2126 × R + 0.7152 × G + 0.0722 × B
Converte i valori sRGB in luminanza relativa lineare secondo lo standard W3C, calcolando il quoziente tra il colore più chiaro (L1) e quello più scuro (L2).