Verifica del contrasto dei colori

Come usare la verifica del contrasto

1. Inserisci il Colore del testo e il Colore di sfondo. Usa i campioni colore oppure scrivi un qualsiasi valore CSS nei campi: un codice HEX come #595959, rgb(89 89 89), hsl(0 0% 35%) o un nome come navy.
2. Il Rapporto di contrasto si aggiorna mentre scrivi, da 1:1 (nessun contrasto) a 21:1 (nero su bianco).
3. La tabella Risultati WCAG 2.2 indica Superato o Non superato per Testo normale, Testo grande e Componenti dell’interfaccia e grafica, ai livelli AA e AAA.
4. Controlla l’Anteprima: mostra testo normale, testo grande, testo grande in grassetto, il contorno di un pulsante e un’icona nei tuoi due colori.
5. Se un livello non è superato, scegli un Obiettivo in Suggerimenti. Lo strumento propone il Colore del testo conforme più vicino e il Colore di sfondo conforme più vicino. Clicca su Usa per applicarne uno. Inverti i colori scambia testo e sfondo.

Tutto viene calcolato nel tuo browser; nulla viene inviato altrove.

Come si calcola il rapporto di contrasto

Le WCAG 2.x definiscono il rapporto come (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza relativa del colore più chiaro e L2 quella del più scuro. La luminanza relativa si calcola dai canali sRGB linearizzati: ogni canale viene decodificato con la curva di trasferimento sRGB, poi L = 0,2126 R + 0,7152 G + 0,0722 B. Il verde pesa di più perché i nostri occhi sono più sensibili a questo colore: ecco perché un verde puro sembra molto più luminoso di un blu puro della stessa “intensità”.

Il rapporto non viene mai arrotondato per eccesso. #777777 su bianco dà circa 4,48:1 e non supera il livello AA per il testo normale, anche se sembra “4,5”. Lo strumento tronca il valore mostrato a due decimali, così ciò che vedi è esattamente ciò che le WCAG verificano.

Se il colore del testo è semitrasparente (per esempio rgb(0 0 0 / 60%)), viene prima fuso con lo sfondo, come lo disegnerebbe il browser. La trasparenza del colore di sfondo viene invece ignorata, perché non si sa cosa ci sia dietro la pagina.

I livelli WCAG in sintesi

Per “testo grande” si intende almeno 18 pt (24 pixel CSS), oppure 14 pt in grassetto (circa 18,66 px). Loghi e testo puramente decorativo non hanno requisiti. La regola del 3:1 per i componenti dell’interfaccia (criterio di successo 1.4.11) vale per i bordi di campi e pulsanti, gli indicatori di focus, le icone e le linee dei grafici che gli utenti devono vedere.

Come funzionano i suggerimenti

I colori suggeriti mantengono tonalità e crominanza del tuo colore nello spazio OKLCH e ne cambiano solo la luminosità, più scura o più chiara, fino a raggiungere il rapporto obiettivo. Lo strumento sceglie poi la direzione visivamente più vicina al colore originale, misurata in OKLab. Il risultato viene verificato di nuovo dopo l’arrotondamento a un codice HEX, così supera davvero la soglia. Se nessuna luminosità raggiunge l’obiettivo (per esempio 7:1 contro un grigio medio), lo strumento te lo dice.

E l’APCA?

L’APCA (Accessible Perceptual Contrast Algorithm) è un modello di contrasto più recente, preso in considerazione per le future WCAG 3. Tiene conto di spessore del carattere, dimensione e polarità (scuro su chiaro oppure chiaro su scuro). È ancora una bozza e non un requisito legale o normativo, quindi questo strumento riporta i risultati WCAG 2.x, che restano il riferimento per la norma europea sull’accessibilità EN 301 549, per la Section 508 e per la maggior parte delle leggi.