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.
1.143 visualizzazioni
La veloce volpe marrone salta sopra il cane pigro
Esempio di testo grande 24px
Come Viene Calcolato il Rapporto
La formula WCAG è (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza relativa del colore più chiaro e L2 quella del colore più scuro — quindi il risultato cade sempre tra 1:1 (colori identici) e 21:1 (nero puro su bianco puro). La luminanza relativa non è una semplice media dei canali RGB; è una somma ponderata percettivamente, L = 0,2126R + 0,7152G + 0,0722B, applicata dopo che ogni canale è stato linearizzato invertendo la curva gamma sRGB (i valori sotto 0,03928 si dividono per 12,92, il resto passa per ((c+0,055)/1,055)^2,4). Il verde contribuisce a circa dieci volte la luminosità percepita del blu, quindi scambiare i canali verde e blu di un colore può spostare drasticamente il suo peso visibile mentre la luminosità grezza resta invariata.
Un esempio concreto: il grigio medio puro #767676 su sfondo bianco dà esattamente 4,54:1 — appena sopra la soglia WCAG AA di 4,5:1 per il testo normale. Scurendolo di un passo, a #757575, scende a 4,48:1, non superando l'AA. Ecco perché tanti design grigio-su-bianco falliscono silenziosamente un audit: il divario visivo tra grigio conforme e non conforme è un singolo scatto RGB, invisibile alla maggior parte degli occhi ma molto visibile a uno scanner automatico o a un utente ipovedente sotto la luce diretta del sole.
Cosa Dovresti Sapere
Il WCAG 2.1 stabilisce due soglie AA a seconda della dimensione del testo: 4,5:1 per il testo normale, e un più permissivo 3:1 per il testo grande — definito come 18pt (24px) peso normale o 14pt (18,7px) grassetto e oltre, poiché i tratti più spessi restano leggibili con un contrasto inferiore. Il livello AAA, più rigoroso, richiede 7:1 sul testo normale e 4,5:1 sul testo grande. Gli elementi UI non testuali come icone, bordi dei campi di input e indicatori di focus hanno un proprio requisito di 3:1 secondo il WCAG 2.1 SC 1.4.11, misurato rispetto al colore di sfondo adiacente.
Questi numeri non sono arbitrari — derivano da ricerche sulla leggibilità per utenti ipovedenti, daltonici e con perdita di sensibilità al contrasto legata all'età, e fungono anche da riferimento legale in normative sull'accessibilità come l'ADA e la EN 301 549, lo standard europeo dietro l'European Accessibility Act. Un contrasto insufficiente è uno dei problemi più comunemente segnalati negli audit automatici di accessibilità web, motivo per cui molti design system incorporano una soglia minima di 4,5:1 direttamente nei propri token di colore invece di lasciare il controllo ai singoli designer.
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 differire soggettivamente (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) grassetto e oltre. Il testo grande richiede solo 3:1 in AA perché i glifi più grandi restano leggibili anche con un contrasto minore.
Il mio colore del brand non supera il test — cosa faccio adesso?
Tienilo per la decorazione e sposta l'uso del testo verso un tono più scuro o più chiaro finché non supera il test; una scala di tinte/ombreggiature aiuta. Il testo segnaposto e gli stati disabilitati sono esenti dal requisito, ma mantienili comunque ragionevoli.
Perché usare la luminanza corretta con la gamma invece di una semplice media RGB?
Perché la luminosità percepita non è lineare né uguale tra i canali — mediare l'RGB grezzo tratterebbe il giallo brillante (#ffff00) e il blu medio (#0000ff) come se avessero circa la stessa luminosità, mentre il giallo appare molto più brillante all'occhio. Il passaggio di decodifica gamma corregge il modo in cui l'sRGB comprime i valori invece di memorizzare luce lineare, e i pesi 0,2126/0,7152/0,0722 rispecchiano la maggiore sensibilità dell'occhio al verde, poi al rosso, poi al blu. Saltando uno di questi passaggi, i numeri smettono di corrispondere a come il contrasto appare realmente.
Un rapporto conforme garantisce che i colori funzionino per gli utenti daltonici?
Non del tutto — il rapporto misura solo la differenza di luminanza, non quella di tonalità, quindi due colori possono superare 4,5:1 e restare comunque difficili da distinguere per una persona con deuteranopia se la loro differenza principale è la tonalità piuttosto che la luminosità, come accade con alcune coppie rosso/verde a luminosità simile. Un rapporto di contrasto elevato è necessario ma non sufficiente per l'accessibilità ai daltonici; abbinarlo a una differenza di luminosità o a un indizio non cromatico come un'icona o una sottolineatura copre entrambi i casi.
Strumenti Simili
Segnala un Problema
Verificatore di Contrasto WCAG
Commenti
Ancora nessun commento — scrivi il primo!