GUIDE PRATICHE · Web e codici
Come controllare il contrasto tra testo e sfondo
Due colori possono sembrare diversi e produrre comunque un testo difficile da leggere. Misura il contrasto della coppia realmente usata, poi controlla dimensione del testo, sfondo e stati dell’interfaccia.
Raccogli la coppia effettiva di colori
Individua colore del testo e sfondo immediatamente dietro alle lettere. Una palette generale non basta: lo stesso testo può stare su superfici diverse, con rapporti diversi.
Il nostro strumento confronta due colori esadecimali opachi. Non scansiona automaticamente una pagina e non ricostruisce da solo trasparenze, immagini o gradienti sotto al testo.
Scegli il criterio adatto al testo
Per il criterio WCAG AA del testo normale il rapporto minimo è 4,5:1; per testo grande è 3:1. La categoria dipende da dimensione e peso del carattere secondo la definizione del criterio, non dal fatto che sia un titolo.
Per il testo latino, la definizione usa almeno 18 punti normali o 14 punti in grassetto, con le equivalenze previste per altre scritture. In caso di dubbio, verifica il requisito più severo.
Contrast checker: controllo contrasto coloriLeggi rapporto e verdetto insieme
Inserisci le due tinte in Contrasto colori e leggi il risultato relativo alla categoria del testo. Un rapporto visualizzato con due decimali può nascondere una differenza vicino alla soglia.
Non arrotondare verso l’alto per dichiarare un superamento. Il tool valuta le soglie sul valore calcolato prima dell’arrotondamento; controlla quindi il verdetto, oltre al numero mostrato.
PROVA IL PASSAGGIO
Contrast checker: controllo contrasto colori
Usa qui il calcolatore completo: carica i valori dell’esempio, poi modifica un dato alla volta e confronta il risultato con i passaggi della guida.
Un esempio riproducibile
Carica #777777 su #FFFFFF e avvia: il rapporto è circa 4,48:1, insufficiente per AA del testo normale. Cambia solo il testo in #767676: circa 4,54:1, sufficiente per quella soglia. I verdetti usano il rapporto non arrotondato, non l’aspetto del campione.
Risultato
Il risultato apparirà qui.
Esempio: due grigi quasi uguali
Su bianco, #777777 produce circa 4,48:1 e non supera AA per testo normale. #767676 produce circa 4,54:1 e supera quella soglia. La differenza visiva è piccola, quella del requisito è precisa.
Due grigi sullo stesso bianco
- Dati di partenza
- Sfondo #FFFFFF; testo #777777 oppure #767676
- Risultato
- Circa 4,48:1: non supera AA normale. Circa 4,54:1: supera AA normale.
I campioni sono dimostrativi. Il testo esplicativo riporta colori, rapporti ed esiti per non affidare il significato soltanto all’aspetto dei riquadri.
-
#777777 su #FFFFFF
Circa 4,48:1 — insufficiente per AA del testo normale.
-
#767676 su #FFFFFF
Circa 4,54:1 — sufficiente per quella soglia.
Ripeti la prova nei due temi e negli stati
Per riprodurre un caso vicino alla soglia, inserisci #767676 come testo. Su bianco (#FFFFFF) il nostro calcolatore dà circa 4,54:1. Cambia solo lo sfondo in #F5F5F5 e ottieni circa 4,17:1. Lo stesso grigio supera la soglia AA del testo normale sulla prima superficie e scende sotto sulla seconda.
Controlla testo ordinario, link, testo secondario e contenuti dei pulsanti sulle superfici effettive. Ripeti con tema scuro e con stati di interazione rilevanti, senza assumere che invertire i colori risolva ogni caso.
Un testo su sfondo variabile richiede il controllo delle combinazioni effettive, compresa quella meno favorevole. Non estrarre da un’immagine un solo campione e considerarlo valido per tutta la superficie.
| Criterio | Rapporto minimo |
|---|---|
| AA, testo normale | 4,5:1 |
| AA, testo grande | 3:1 |
| AAA, testo normale | 7:1 |
Valuta la leggibilità oltre il rapporto
Un rapporto sufficiente non dimostra l’accessibilità completa. Dimensione, spessore, spaziatura, contenuto e uso del solo colore restano aspetti da verificare nell’interfaccia reale.
Se sei appena sopra la soglia, valuta un margine maggiore per un uso più robusto. Mantieni segnali testuali o forme quando un colore comunica un esito: una tinta diversa da sola può non bastare.
Questi sono dati di esempio, non misure di un caso reale. Il risultato usa lo stesso motore dello strumento completo. Confrontalo con i passaggi spiegati nella guida e spunta le verifiche dopo il controllo.
Fonti e metodo
Domande frequenti
Un rapporto sufficiente certifica la conformità WCAG?
No. Verifica soltanto l’aspetto di contrasto esaminato, nelle condizioni e con i colori inseriti; altri requisiti richiedono controlli separati.
Posso usare il colore di un livello trasparente?
Serve il colore effettivo risultante sullo sfondo. Il tool a due colori opachi non calcola automaticamente tutta la composizione della pagina.