Un contrasto di colore sufficiente determina se il testo resta leggibile per tutti: anche in caso di ipovisione, sotto luce solare intensa o su schermi di scarsa qualità. Con il Verifica contrasto colore (WCAG) puoi verificare due colori rispetto alle Linee guida per l'accessibilità dei contenuti Web (WCAG 2.1) in pochi secondi. Questa guida spiega la formula, le soglie e un caso limite comune nei progetti reali.
Come si calcola il rapporto di contrasto
Il rapporto di contrasto descrive la differenza di luminosità tra il colore in primo piano e quello di sfondo. Si ricava dalla luminanza relativa L dei due colori:
Rapporto di contrasto = (L_chiaro + 0,05) / (L_scuro + 0,05)
Qui L_chiaro è la luminanza relativa del colore più chiaro e L_scuro quella del più scuro (WCAG 2.1). La luminanza relativa pondera le componenti rossa, verde e blu secondo la percezione umana. I valori vanno da 1:1 (nessun contrasto, colori identici) fino a 21:1, il massimo per nero puro su bianco puro.
Le soglie WCAG per AA e AAA
WCAG definisce due livelli di conformità (AA, AAA) e due dimensioni di testo. "Testo grande" significa a partire da 18 pt oppure da 14 pt in grassetto. Il testo più piccolo e di peso normale è considerato testo normale.
| Requisito | Testo normale | Testo grande |
|---|---|---|
| WCAG AA | ≥ 4,5:1 | ≥ 3:1 |
| WCAG AAA | ≥ 7:1 | ≥ 4,5:1 |
AA è il livello minimo richiesto dalla maggior parte delle leggi e delle gare d'appalto, mentre AAA è la raccomandazione più esigente. Il testo grande può avere un contrasto inferiore, perché le forme delle lettere più spesse restano leggibili anche con una differenza minore.
Esempio: un caso limite risicato
Un errore frequente è usare un grigio medio per il testo scorrevole. Il grigio puro #777777 su sfondo bianco dà un rapporto di contrasto di circa 4,48:1. Resta appena al di sotto della soglia AA di 4,5:1: non è quindi accessibile per il testo scorrevole, anche se a prima vista sembra sufficiente. Solo un grigio un po' più scuro raggiunge i 4,5:1 richiesti. Sono proprio questi casi limite che il calcolatore rivela in modo affidabile.
Come eseguire la verifica
Inserisci il colore in primo piano e quello di sfondo come valori esadecimali, ad esempio #333333 su #FFFFFF. Il calcolatore restituisce il rapporto e indica, per ogni combinazione di livello e dimensione del testo, se è superato. Verifica sempre i colori del testo rispetto allo sfondo reale, inclusi pulsanti, link nello stato hover e testo sopra le immagini. In questo modo garantisci che il tuo design non sia solo gradevole, ma dimostrabilmente accessibile.
