Il testo grigio chiaro su sfondo bianco può sembrare elegante e minimalista a prima vista ed essere completamente illeggibile per gli utenti con problemi di vista, forte luce solare sullo schermo o semplicemente con normale affaticamento degli occhi alla fine di una giornata lavorativa. Il contrasto cromatico è uno dei criteri più “tecnici” in termini di accessibilità – ci sono numeri esatti da soddisfare – ma è anche uno dei più facili da testare e correggere in anticipo.
In breve: cosa tratta questa guida
Quali rapporti richiede WCAG
WCAG definisce un rapporto di contrasto come un numero compreso tra 1:1 (nessun contrasto – colore identico) e 21:1 (il massimo contrasto possibile – nero puro su bianco puro). Al livello AA (il livello obbligatorio nella maggior parte dei paesi, incluso Israele), il requisito è un rapporto di almeno 4,5:1 tra il testo normale e lo sfondo dietro di esso. Al livello AAA più severo, il requisito sale a 7:1.
Perché è consentito un testo di grandi dimensioni con meno contrasto
Il testo di grandi dimensioni rimane leggibile anche con un contrasto inferiore, quindi WCAG imposta una soglia più semplice: 3:1 al livello AA (invece di 4,5:1) e 4,5:1 al livello AAA (invece di 7:1). Per "testo grande" si intende un testo di 18 punti o più (circa 24 px) o di 14 punti o più (circa 18,7 px) se è in grassetto. I titoli grandi, ad esempio, possono "permettersi" un contrasto leggermente inferiore rispetto a un normale paragrafo e soddisfare comunque i requisiti.
Come verificare un rapporto di contrasto nella pratica
Non è necessario calcolarlo manualmente: strumenti gratuiti come WebAIM Contrast Checker ti consentono di inserire i codici colore del testo e dello sfondo e ottenere immediatamente il rapporto esatto e un punteggio superato/fallito per ciascun livello. Vale la pena controllare non solo il testo su uno sfondo solido, ma anche il testo su immagini di sfondo o gradienti, dove il contrasto può variare tra diverse aree della stessa immagine, quindi è meglio testare il punto più "problematico".
💡 Consiglio pratico
Non solo testo: lo stesso requisito di contrasto (a una soglia più semplice, 3:1) si applica anche ai componenti grafici dell'interfaccia utente come i contorni dei campi modulo, le icone funzionali e i bordi dei pulsanti, non solo alle lettere.
Come scegliere in anticipo una tavolozza di colori accessibile
L'approccio più efficiente consiste nel verificare il contrasto nella fase di progettazione del modello e non in ogni documento separatamente. Quando si scelgono i colori del marchio per intestazioni, corpo del testo e collegamenti, vale la pena confermare in anticipo che ogni combinazione testo-sfondo effettivamente utilizzata soddisfi almeno 4,5:1. In questo modo, ogni nuovo documento creato dal modello "eredita" automaticamente il contrasto corretto, invece di controllare ciascun documento separatamente dopo che è già stato scritto.
Vuoi sapere se i tuoi documenti soddisfano i requisiti di contrasto?
Il nostro strumento controlla il contrasto del colore come parte della scansione automatica di ogni file PDF sul tuo sito.
Scansiona il tuo sito gratuitamente ←