Validare un progetto web
Verificare le coppie di testo e sfondo prima di programmare evita di rifare la palette in seguito.
Verifica contrasto
Verifica se due colori rispettano il contrasto WCAG.
🔒 Questo file viene elaborato nel tuo browser. Non viene mai caricato su un server.
…
A cosa serve
Il contrasto tra un testo e il suo sfondo determina se si riesce a leggere comodamente. Si misura come rapporto numerico tra le luminosità dei due colori, da 1:1 quando sono identici fino a 21:1 nel caso del nero puro su bianco puro.
Le norme WCAG, riferimento internazionale per l’accessibilità web, fissano le soglie. Per il testo di dimensione normale, 4.5:1 è il minimo del livello AA, quello che di solito viene richiesto e che la normativa sull’accessibilità di molti paesi impone ai siti pubblici. Il livello AAA, più severo, chiede 7:1.
Non è solo questione di rispettare una norma. Il grigio chiaro su bianco che sullo schermo del grafico sembra tanto elegante diventa illeggibile al sole, su un telefono con poca luminosità o per chiunque abbia la vista affaticata, e sono molte più persone di quante si creda.
Come funziona
- Indica il colore del testo e il colore di sfondo da verificare.
- Lo strumento calcola all’istante il rapporto di contrasto tra i due.
- Controlla se soddisfa i livelli AA e AAA delle norme di accessibilità WCAG.
Quando usarlo
Rispettare la normativa
I siti della pubblica amministrazione e molti capitolati richiedono il livello AA.
Testi su immagine
Un titolo su una foto va verificato contro la zona più chiara di quella foto.
Consigli pratici
- Il testo grande e in grassetto ha una soglia più permissiva, 3:1, ma conviene non tirarla.
- I testi secondari in grigio sono l’errore più frequente: spesso restano sotto 4.5:1 senza che nessuno se ne accorga.
- Verifica anche gli stati di link e pulsanti, non solo il testo normale.
- Se una coppia non raggiunge il minimo, di solito basta scurire il testo anziché cambiare lo sfondo.
Domande frequenti
Quale rapporto serve perché sia accessibile?
Per il testo normale, un minimo di 4.5:1 soddisfa il livello AA (lo standard consueto) e 7:1 soddisfa il livello AAA, più severo.
Perché è importante il contrasto cromatico?
Un contrasto basso rende faticosa la lettura a chi ha problemi di vista e rende il tuo sito meno accessibile e più stancante per tutti, soprattutto all’aperto o su schermi di scarsa qualità.