Connessione non riuscita. Per favore riprova.

Vai al contenuto
SEO Tools
Aiuto e documentazione
UX / UI Impatto alto Facile 20–40 min

Contrasto del testo rispetto allo sfondo

Il testo deve avere un contrasto sufficiente (WCAG AA 4,5:1).

Cos'è

Il contrasto è la differenza di luminosità tra testo e sfondo. Un testo grigio chiaro su sfondo bianco ha un contrasto basso e si legge male. WCAG AA richiede un rapporto di almeno 4,5:1 per il testo comune.

Perché è importante

Un contrasto basso esclude gli utenti ipovedenti e peggiora la leggibilità per tutti, specialmente su mobile sotto il sole. È una carenza di accessibilità comune e Google la segnala negli audit.

Come fare

  1. 1Verifica il rapporto di contrasto (strumento nel browser o un contrast checker online).
  2. 2Per il testo comune punta a ≥ 4,5:1, per il testo grande a ≥ 3:1.
  3. 3Evita il testo grigio chiaro (#ccc, #ddd) su sfondo bianco.
  4. 4Non attenuare il testo con un'opacità troppo bassa.

Esempio

Sbagliato
.text { color: #bbbbbb; background: #ffffff; } /* ~1.9:1 — illeggibile */
Corretto
.text { color: #374151; background: #ffffff; } /* ~10:1 — OK */

Conclusione

Un contrasto sufficiente è la base della leggibilità e dell'accessibilità. La nostra euristica statica segnala i colori palesemente chiari, ma il rapporto esatto verificalo nel browser. Testo più scuro su sfondo chiaro (e viceversa) è una scelta sicura.

Argomenti correlati