Contrasto dei colori: rapporti WCAG, verifiche e correzioni

Un testo grigio chiaro su sfondo bianco sembra pulito in un file di design. Su uno smartphone sotto il sole, o per una persona ipovedente, è faticoso da leggere. Ed è l'errore di accessibilità più diffuso: il WebAIM Million 2026 (si apre in una nuova scheda) ha trovato testo a basso contrasto sull'83,9% delle home page del primo milione di siti, con in media 34 casi distinti per pagina.

La buona notizia è che il contrasto si misura, le soglie sono chiare e le correzioni costano per lo più poco. Questa guida fornisce i numeri, gli strumenti gratuiti e un metodo per sistemare i colori del brand senza ricominciare da capo.

Che cos'è il rapporto di contrasto tra colori?

Il rapporto di contrasto è un numero che confronta la luminosità relativa, o luminanza, di due colori, di solito il testo e il suo sfondo. Le WCAG lo calcolano con una formula fissa, e il risultato va da 1:1 (nessuna differenza, bianco su bianco) a 21:1 (nero su bianco). Più alto è il numero, più i due colori si distinguono facilmente.

La formula è (L1 + 0,05) / (L2 + 0,05), dove L1 è la luminanza relativa del colore più chiaro e L2 quella del più scuro. Non servirà mai calcolarla a mano, ma un dettaglio conta: entra in gioco solo la luminanza, non la tinta. Per questo un testo rosso su sfondo verde può sembrare vivace e ottenere comunque un punteggio basso.

L'altro dettaglio che sfugge è l'arrotondamento. Il documento esplicativo del criterio 1.4.3 (si apre in una nuova scheda) del W3C dice che i valori calcolati “non dovrebbero essere arrotondati (per esempio, 4,499:1 non raggiungerebbe la soglia di 4,5:1)”. Così il grigio #767676 su bianco (4,54:1) è conforme, mentre #777777 su bianco (4,48:1) non lo è, anche se a occhio nessuno saprebbe distinguerli.

Quale rapporto di contrasto richiedono le WCAG?

Per il livello AA, a cui rimanda la maggior parte di leggi e contratti, il testo normale richiede almeno 4,5:1 rispetto allo sfondo e il testo grande 3:1 (criterio di successo 1.4.3). I componenti dell'interfaccia e i grafici significativi richiedono 3:1 rispetto ai colori adiacenti (1.4.11). Il livello AAA, più severo, chiede 7:1 per il testo normale e 4,5:1 per il testo grande (1.4.6).

Perché 4,5:1? Il W3C spiega che la soglia “compensa la perdita di sensibilità al contrasto che sperimentano di solito gli utenti con una perdita della vista equivalente a circa 20/40” (all'incirca 5/10). In altre parole, è tarata su persone con una vista moderatamente ridotta, tra cui molti clienti anziani che non si definirebbero mai disabili.

Alcuni testi sono esentati: loghi e marchi, testo puramente decorativo, testo non visibile a nessuno, testo all'interno di un'immagine con altri contenuti visivi significativi e testo dei controlli inattivi (disabilitati). Il logo può restare com'è. Un paragrafo scritto nel colore chiaro del logo, no.

Cosa conta come testo grande?

Per le WCAG il testo grande è di almeno 18 punti, o di almeno 14 punti se in grassetto. Il W3C li converte in circa 24 pixel CSS e 18,5 pixel in grassetto. Tutto ciò che è più piccolo richiede il pieno 4,5:1. Testo del corpo, didascalie, etichette dei moduli, prezzi e link del footer non sono quasi mai testo grande, quindi richiedono il rapporto più alto.

Un esempio concreto. Il grigio #949494 su bianco ottiene 3,03:1. Va bene per un titolo di 28 pixel ed è un errore per un paragrafo di 16 pixel dello stesso colore. Molti siti sono conformi nei titoli e non lo sono in tutto ciò che sta sotto.

I font sottili e decorativi richiedono più attenzione. Il W3C osserva che, a causa dell'anti-aliasing, “i font particolarmente sottili o insoliti possono essere visualizzati dagli user agent con un colore molto più tenue” di quello scelto. Se il font del brand ha un peso leggero, conviene lasciarsi un margine sopra 4,5:1 invece di puntare a 4,51.

Il contrasto vale anche per pulsanti, icone, focus e grafici?

Sì. In base al criterio di successo 1.4.11 (livello AA), tutto ciò che serve vedere per identificare un controllo, il suo stato o un grafico richiede 3:1 rispetto ai colori adiacenti. Rientrano i bordi dei campi dei moduli, le icone senza etichetta testuale, i contorni del focus, gli stati di caselle di controllo e interruttori, e le linee e i segmenti dei grafici. Il testo dentro un pulsante richiede comunque 4,5:1.

• Campi dei moduli: un bordo grigio chiaro #CCCCCC su bianco ottiene 1,61:1. Se quella linea tenue è l'unica cosa che indica dove scrivere, non è conforme.
• Pulsanti: le WCAG non richiedono un bordo visibile attorno a ogni pulsante. Il documento esplicativo del criterio 1.4.11 (si apre in una nuova scheda) del W3C dice che un contorno serve solo se non c'è un altro modo visivo per identificare il controllo. Se un pulsante si riconosce solo dalla sua forma colorata, quella forma richiede 3:1 rispetto alla pagina.
• Icone: una lente di ricerca, il cuore della lista dei desideri o l'icona del carrello senza testo accanto richiedono 3:1.
• Indicatori del focus: il contorno che mostra il focus da tastiera deve contrastare con lo sfondo circostante. La nostra guida alle WCAG 2.2 tratta i nuovi criteri sul focus.
• Grafici: le linee di un grafico a linee e le fette di un grafico a torta richiedono 3:1, a meno che gli stessi valori non siano riportati anche come testo.
• I controlli disabilitati sono esentati, anche se le persone devono comunque capire se un pulsante si può premere.

I link nel testo sono un caso particolare. Se si distinguono solo per il colore, senza sottolineatura, la tecnica G183 (si apre in una nuova scheda) del W3C chiede 3:1 tra il colore del link e il testo circostante, mentre entrambi devono comunque avere 4,5:1 rispetto allo sfondo. Trovare tre colori che soddisfino tutto questo è difficile. Una sottolineatura è molto più semplice.

Come si verifica il contrasto dei colori?

Si usano uno strumento gratuito per le singole coppie di colori, gli strumenti per sviluppatori del browser per le pagine online e una scansione automatica per trovare le aree problematiche in tutto il sito. Poi va controllato a occhio ciò che gli strumenti non vedono: testo su foto e sfumature, stati al passaggio del mouse e al focus, testo segnaposto e messaggi di errore. Bastano pochi minuti per ogni template di pagina.

• WebAIM Contrast Checker (si apre in una nuova scheda): si inseriscono due codici esadecimali e si ottiene il rapporto, con esito per testo normale, testo grande e oggetti grafici. Il cursore della luminosità aiuta a trovare la tonalità conforme più vicina.
• Colour Contrast Analyser (si apre in una nuova scheda): un'app desktop gratuita di Vispero per Windows e macOS. Il contagocce campiona qualsiasi pixel dello schermo, utile per testo su immagini, PDF e app, e include un simulatore di daltonismo.
• Chrome DevTools: si ispeziona un testo e si apre il selettore del colore. La sua sezione sul rapporto di contrasto (si apre in una nuova scheda) mostra le linee per AA e AAA e può suggerire un colore conforme. Il pannello CSS Overview elenca tutti i problemi di contrasto della pagina.
• Strumenti automatici: le estensioni del browser e Lighthouse segnalano il testo a basso contrasto in tutta la pagina, ma spesso indicano il testo su immagini o sfumature come da verificare a mano invece di dichiararlo conforme o meno.

Dove gli strumenti non arrivano, si campiona a mano. Per un testo sulla foto di apertura, va controllata la parte più chiara dell'immagine dietro le lettere più chiare; il W3C elenca le immagini di sfondo senza contrasto sufficiente tra gli errori noti (F83). Passare con il mouse sui pulsanti, raggiungerli con Tab, provocare un errore in un modulo, passare alla modalità scura se c'è. Anche un tema scuro può non essere conforme: il grigio #757575 su sfondo #121212 ottiene 4,07:1. La nostra guida su come testare l'accessibilità di un sito web mette il contrasto accanto alle altre verifiche manuali rapide.

Come correggere il contrasto basso senza cambiare l'identità visiva?

Di solito aggiungendo una tonalità più scura del colore del brand per il testo e gli elementi piccoli, e tenendo l'originale per titoli grandi, sfondi e illustrazioni. Molti colori di brand risultano insufficienti solo nelle dimensioni ridotte. Passare dal testo bianco al testo scuro su un colore di brand chiaro spesso basta, e la maggior parte dei visitatori noterà solo che la pagina si legge meglio.

1. Creare una versione “da testo” di ogni colore del brand, con almeno 4,5:1 sugli sfondi principali, e usarla per testo del corpo, link e icone piccole.
2. Usare il colore brillante originale per titoli grandi (lì basta 3:1), sfondi, illustrazioni e decorazioni.
3. Sui colori di brand chiari, passare il testo dei pulsanti dal bianco a un colore scuro.
4. Mettere un riquadro pieno o semitrasparente dietro il testo che sta sulle foto.
5. Controllare ogni stato: passaggio del mouse, focus, link visitato, selezione, errore e segnaposto.
6. Salvare le coppie conformi come design token o impostazioni del tema, così le nuove pagine le ereditano invece di reinventarle.

Progettare per il daltonismo: perché il colore da solo non basta

Contrasto e colore sono problemi distinti. Circa 1 uomo su 12 e 1 donna su 200 hanno un'alterazione della visione dei colori, il più delle volte rosso-verde, secondo Colour Blind Awareness (si apre in una nuova scheda). Il criterio WCAG 1.4.1 (si apre in una nuova scheda) (livello A) dice che il colore non deve essere l'unico modo visivo per trasmettere un'informazione, quindi va affiancato da testo, icone, motivi o sottolineature.

• Errori nei moduli: un bordo rosso da solo non basta. Serve un messaggio come “Inserire il CAP” accanto al campo, possibilmente con un'icona.
• Disponibilità e stato: un pallino verde o rosso accanto a un prodotto non dice nulla a molti acquirenti. Meglio scrivere “Disponibile” o “Esaurito”.
• Grafici: una legenda basata sull'abbinamento dei colori è difficile da leggere. Meglio etichettare direttamente le linee o usare motivi e stili di linea diversi.
• Link: nel testo vanno sottolineati, per i motivi visti sopra.

Per vedere il problema con i propri occhi, i DevTools di Chrome possono simulare i deficit visivi, e anche il Colour Contrast Analyser ha un simulatore. Il contrasto aiuta anche qui: il rapporto misura la luminosità, non la tinta, quindi due colori con un rapporto alto restano distinguibili anche quando le tinte si somigliano. Per capire come le persone ipovedenti o con altre menomazioni configurano i propri dispositivi, c'è la guida su come usano il web le persone con disabilità.

Bastano le modalità ad alto contrasto e i pulsanti per il contrasto?

No. I temi a contrasto del sistema operativo e i pulsanti per il contrasto sulla pagina aiutano chi sa di aver bisogno di più contrasto e lo attiva. Le WCAG però valutano la pagina nel suo stato predefinito, quindi i colori che ogni visitatore vede per primi devono essere conformi. Un pulsante per il contrasto è un'opzione in più per chi ne vuole di più, non una correzione per colori che non sono conformi.

Alcune persone con disabilità usano i temi a contrasto di Windows, che sostituiscono i colori del sito con i propri. Vale la pena testare il sito con uno di questi attivo: le icone costruite con immagini di sfondo possono sparire, e lo stesso vale per gli stili del focus disegnati solo con un'ombra. La media query CSS prefers-contrast permette anche di offrire una versione a contrasto più alto a chi l'ha chiesta nelle impostazioni di sistema.

Il nostro widget ha una regolazione del contrasto e un profilo per il daltonismo, e alcuni visitatori li trovano utili. Diremmo comunque la stessa cosa: se il testo del corpo è #999999 su bianco, va cambiato il CSS. Il widget offre a un visitatore che vuole più contrasto un modo per ottenerlo. Non rende conformi colori predefiniti che non lo sono, e lo dice anche il riferimento alle WCAG nella nostra documentazione.