Il rapporto di contrasto tra due colori è un solo numero, da 1:1 a 21:1, e le WCAG lo usano per decidere se un testo è leggibile. Nero su bianco è il massimo, esattamente 21:1. Questo strumento calcola il rapporto e ti dice quali soglie superi — ma quel numero merita più scetticismo di quanto gliene si riservi di solito.
Quali sono davvero le soglie
Le WCAG 2.x ne definiscono quattro che incontrerai in pratica. AA richiede 4,5:1 per il testo normale e 3:1 per il testo grande. AAA le alza a 7:1 e 4,5:1. AA è il livello a cui rimanda la maggior parte delle normative, incluso lo European Accessibility Act; AAA è aspirazionale, e la specifica stessa non raccomanda di pretenderlo su un intero sito.
"Grande" ha una definizione precisa che frega parecchi: 18pt, cioè 24px, oppure 14pt in grassetto, cioè 18,66px. Non "un titolo". Un titolo da 20px è testo normale per le WCAG e ha bisogno dei 4,5:1 pieni.
Per dare ai numeri un ancoraggio fisico: su sfondo bianco, #767676 sta a 4,54:1 ed è il grigio più chiaro che supera AA. #595959 tocca esattamente 7:1 per AAA. Qualsiasi cosa più chiara di #767676 su bianco fallisce per il testo corrente, il che esclude la maggior parte dei grigi a cui i designer ricorrono d'istinto.
La formula misura la luminanza, non la leggibilità
È la parte che vale la pena capire, perché passare non è la stessa cosa che essere leggibile. Il rapporto si calcola dalla luminanza relativa, che pesa i canali in base a quanto ciascuno contribuisce alla luminosità percepita: il verde conta per 0,7152, il rosso per 0,2126, e il blu per appena 0,0722.
Quella pesatura produce un fallimento specifico e dimostrabile. Il blu puro #0000FF su bianco fa 8,59:1: ben oltre AAA. Chiunque abbia provato a leggere un paragrafo di testo blu puro sa che è faticoso: l'occhio fatica a mettere a fuoco nitidamente la luce blu, e al centro della retina i coni sensibili al blu sono pochissimi. La formula vede un colore molto scuro. I tuoi occhi ne vedono uno sfocato. Il controllo passa e il testo resta cattivo.
La formula è simmetrica, la vista umana no
Ecco il difetto che nel 2025 conta di più, ora che il tema scuro è ovunque. Le WCAG 2 trattano la coppia di colori come non ordinata: non sanno né gli importa quale sia il testo e quale lo sfondo. La vista umana non è così neutrale.
Puoi vedere il problema accadere. Il grigio #949494 fa 3,03:1 su bianco, che fallisce AA per il testo corrente. Lo stesso grigio su nero fa 6,92:1, che passa alla grande. Stesso colore, stessa formula, verdetto radicalmente diverso — e non è perché il tema scuro sia davvero due volte più leggibile. Il testo chiaro su fondo scuro soffre di alonatura: i glifi luminosi sbavano nel buio circostante e i tratti sottili si ingrassano. La formula non ha alcun concetto di questo.
La comunità dell'accessibilità sa da anni che il contrasto delle WCAG 2 è un modello povero della percezione. APCA — Accessible Perceptual Contrast Algorithm — è il candidato sostituto in sviluppo per le WCAG 3, ed è direzionale: dà risposte diverse a seconda di quale colore sia il testo. Non è ancora uno standard e non è ancora quello su cui verrai valutato. Il che lascia una posizione pragmatica: rispetta i numeri delle WCAG 2, perché sono quelli a cui punta la legge, e non scambiare il rispettarli per aver progettato qualcosa di leggibile.
Il requisito che tutti dimenticano: 3:1 per ciò che non è testo
Le WCAG 2.1 hanno aggiunto il criterio di successo 1.4.11, e viene mancato di continuo. Gli elementi non testuali che portano significato hanno bisogno di 3:1 rispetto a ciò che li circonda: il bordo di un campo di input, il contorno di un pulsante, un indicatore di focus, le barre di un grafico, un'icona che è l'unica etichetta di un controllo.
È qui che parecchi design per il resto curati falliscono un audit. Quell'elegante bordo #E5E7EB attorno a un campo del form fa 1,4:1 contro il bianco. Fallisce, e fallisce proprio sull'elemento che un utente ha più bisogno di trovare. Questo strumento controlla le quattro soglie testuali; la regola 3:1 per il non testo devi applicarla tu, mettendo il colore del bordo e quello dello sfondo in questi due campi e cercando il 3:1.
Il contrasto è necessario, non sufficiente
Superare ogni rapporto lascia comunque intatto il fallimento di accessibilità più comune: usare il colore da solo per veicolare informazione. Un bordo rosso che significa "non valido" non dice niente a chi non riesce a distinguerlo da quelli grigi, per quanto bene contrasti. Circa un uomo su dodici ha una qualche forma di deficit della visione dei colori.
La regola è che il colore può rinforzare un messaggio ma non deve mai esserne l'unico portatore. Un errore ha bisogno di un'icona o di un'etichetta testuale accanto al rosso. Un campo obbligatorio ha bisogno di un asterisco. Un grafico a linee ha bisogno di tratteggi diversi, non solo di tinte diverse. È un criterio a parte — 1.4.1, "Uso del colore" — e nessun verificatore di contrasto ti dirà mai che l'hai fallito.
Domande frequenti
Viene inviato qualcosa a un server?
No. Questo strumento è marcato "client": il rapporto è una formula valutata nella scheda del tuo browser. Non viene trasmesso niente.
Perché il mio grigio passa su sfondo scuro e fallisce su uno chiaro?
Perché la relazione non è lineare, e la formula è simmetrica mentre la percezione non lo è. #949494 fa 3,03:1 su bianco e 6,92:1 su nero: stesso colore, più del doppio del punteggio. La lettura onesta è che quel numero ti sta dicendo meno di quanto sembri. Se stai costruendo un tema scuro, provalo con occhi veri su uno schermo vero alla luminosità vera, perché il rapporto ti lusingherà.
Il testo dei placeholder deve passare?
Sì. Il testo di un placeholder è testo, e non c'è esenzione. La cosa sorprende perché quasi ogni design system distribuisce un grigio da placeholder che fallisce. Vale la pena notare a parte che i placeholder non dovrebbero essere usati come etichette del tutto: spariscono nel momento in cui qualcuno digita, portandosi via il significato del campo.
E i pulsanti disabilitati?
I controlli disabilitati sono esplicitamente esentati dai requisiti di contrasto, quindi un pulsante ingrigito può fallire. È una licenza da usare con attenzione: "può essere illeggibile" non è "deve essere illeggibile", e un utente ha comunque bisogno di vedere che il controllo esiste e di capire perché non è disponibile.
Mi serve AA o AAA?
AA, in pratica. È ciò a cui rimanda la normativa sull'accessibilità, ciò che gli audit controllano, e ciò che la specifica stessa tratta come obiettivo generale. AAA vale la pena inseguirlo sui testi lunghi da leggere, dove non ti costa niente, ma la specifica dice esplicitamente che non è richiesto per interi siti — anche perché a 7:1 la tavolozza che ti resta per progettare è molto piccola.