Come verificare il contrasto colori per l'accessibilità
Circa 1 uomo su 12 e 1 donna su 200 hanno una forma di deficit di visione dei colori. Milioni di altre hanno bassa visione, una vista che invecchia o consultano lo schermo al sole. Se il tuo testo non ha abbastanza contrasto con il suo sfondo, queste persone non possono leggerlo.
Il contrasto colori non è un «di più» — è un requisito centrale di accessibilità.
Cosa richiede WCAG
Le Web Content Accessibility Guidelines (WCAG) definiscono i rapporti di contrasto minimi tra testo e sfondo:
| Livello | Testo normale | Testo grande | Elementi non testuali |
|---|---|---|---|
| AA (minimo) | 4,5 : 1 | 3 : 1 | 3 : 1 |
| AAA (rinforzato) | 7 : 1 | 4,5 : 1 | — |
«Testo grande» significa 18 px in grassetto o 24 px regolare e oltre.
Il rapporto di contrasto va da 1 : 1 (nessun contrasto — bianco su bianco) a 21 : 1 (contrasto massimo — nero su bianco).
Come verificare il contrasto
- Seleziona i tuoi colori — inserisci il colore del testo (primo piano) e quello dello sfondo tramite codici HEX, valori RGB o selettori.
- Consulta i risultati — lo strumento mostra istantaneamente il rapporto di contrasto e se la tua combinazione passa WCAG AA e AAA in testo normale e grande.
- Regola se necessario — se il contrasto fallisce, scurisci il testo o schiarisci lo sfondo (o viceversa) fino a raggiungere il livello richiesto.
Errori di contrasto comuni
Testo grigio chiaro su bianco — #999999 su #ffffff ha un rapporto di solo 2,8 : 1. Questo fallisce a WCAG AA. Può sembrare «pulito» a un designer dalla vista perfetta, ma è illeggibile per molti.
Testo colorato su sfondo colorato — un pulsante blu con testo bianco passa spesso, ma un pulsante verde con testo bianco no. Verifica sempre — non si può giudicare un rapporto di contrasto a occhio.
Testo di placeholder — i testi di placeholder dei campi sono notoriamente deboli in contrasto. Anche se WCAG non li impone strettamente, gli utenti devono comunque leggerli.
Modalità scura — i designer usano spesso grigio medio su grigio scuro per un look «sottile». Questo fallisce frequentemente i controlli di contrasto.
Consigli
- Verifica ogni combinazione testo/sfondo — non presumere nulla. Anche designer esperti sono sorpresi dalle combinazioni che falliscono.
- Testa entrambi i temi — se il tuo sito ha una modalità chiara e una modalità scura, verifica il contrasto in entrambe. Un colore che funziona su bianco può fallire su grigio scuro.
- Usa i colori del tuo brand con discernimento — se il tuo blu di brand fallisce come colore di testo, usalo per elementi più grandi (pulsanti, intestazioni) dove la soglia «testo grande» (3 : 1) si applica, e usa una sfumatura più scura per il corpo del testo.
- Non basarti unicamente sul colore — oltre a un contrasto sufficiente, non veicolare mai un'informazione solo tramite il colore. Usa icone, etichette o pattern in complemento.
Domande frequenti
Quale rapporto di contrasto puntare?
Per testo normale, punta ad almeno 4,5 : 1 (WCAG AA). Per testo grande (18 px grassetto o 24 px regolare), 3 : 1 basta. Per il livello di accessibilità più alto (AAA), punta a 7 : 1 per testo normale.
Si applica solo al testo?
No. WCAG 2.1 richiede anche un contrasto sufficiente per i componenti di interfaccia e gli oggetti grafici (icone, bordi di campi, indicatori di focus). Il minimo per gli elementi non testuali è 3 : 1.
E in modalità scura?
La modalità scura richiede le stesse verifiche di contrasto. Testo bianco su sfondo scuro passa spesso facilmente, ma testo grigio su sfondo grigio scuro fallisce spesso. Testa entrambe le modalità.
Il contrasto colori è un requisito legale?
In molte giurisdizioni, sì. L'ADA (US), EN 301 549 (UE) e leggi simili impongono l'accessibilità digitale. La conformità WCAG è lo standard riconosciuto per soddisfarle.