Sfondo per il testo: che cosa rende le parole facili da leggere

Un buon sfondo per il testo ha tre cose nell’area dietro le parole: forte contrasto con le lettere, pochissimi dettagli fini e una gamma uniforme di toni invece di macchie chiare e scure. Il colore conta molto meno di quanto si pensi. Un gradiente viola può portare il testo splendidamente e una foto grigia può rovinarlo, a seconda di quelle tre proprietà. Questa guida mostra come valutare qualsiasi sfondo, foto, gradiente o texture, e che cosa fare quando fallisce.

Contrasto: la prima proprietà

Il contrasto è la differenza di luminosità tra le lettere e ciò che sta direttamente dietro. Le Web Content Accessibility Guidelines fissano la soglia misurabile: un rapporto di almeno 4,5:1 per il testo normale e 3:1 per il testo grande. Il verificatore di contrasto di WebAIM lo calcola per due colori qualsiasi.

Su un colore piatto basta un solo controllo. Su un gradiente o una foto lo sfondo cambia sotto ogni parola, quindi controlla il punto più chiaro dietro il testo chiaro e il punto più scuro dietro il testo scuro. È lì che il testo cede per primo. Contrasto del colore e accessibilità approfondisce gli standard.

Dettaglio: perché gli sfondi affollati sono difficili da leggere

Il contrasto è necessario ma non basta. Uno sfondo pieno di dettagli grandi quanto le lettere rende difficile la lettura anche quando il rapporto passa, perché l’occhio non riesce a separare le forme delle lettere da quelle dietro. Foglie, ghiaia, folle, righe sottili e piccoli pattern sono i peggiori. Le forme grandi e morbide sono le migliori: un cielo, un muro sfocato, un gradiente liscio.

La texture va bene quando la sua grana è molto più piccola delle lettere, come la grana della pellicola o la grana della carta. Diventa un problema quando le sue caratteristiche si avvicinano alla dimensione dei tratti del tuo carattere. Se ami un pattern, ingrandiscilo finché le sue forme sono nettamente più grandi delle lettere, oppure tienilo lontano dalle parole. Testo su sfondi affollati tratta i pattern più nel dettaglio, e testo leggibile sulle foto tratta le immagini.

Gamma di toni: macchie chiare e scure sotto una riga

La terza proprietà è quella che coglie di sorpresa. Se una singola riga di testo attraversa sia una macchia chiara sia una scura, nessun colore del testo può funzionare: il bianco sparisce sulla parte chiara e il nero su quella scura. Un buon sfondo per il testo mantiene una gamma ristretta di toni sotto ogni riga, tutti chiari o tutti scuri.

Come provare qualsiasi sfondo per il testo

1. 1

   Socchiudi gli occhi

   Chiudi a metà gli occhi. I dettagli sfumano e resta solo il tono. Se le parole si dissolvono nello sfondo, il contrasto è troppo basso.

2. 2

   Sfocalo

   Applica una forte sfocatura a una copia del solo sfondo. Ciò che resta sotto l’area del testo è il tono su cui le lettere stanno davvero.

3. 3

   Guardalo in scala di grigi

   Il colore può farti credere che il contrasto vada bene. La scala di grigi mostra solo la luminosità, da cui dipende la leggibilità.

4. 4

   Controlla gli estremi

   Misura il contrasto nei punti più chiari e più scuri dietro le parole, non la media.

5. 5

   Guardalo su un telefono

   A distanza di braccio, alla luce del giorno, alla dimensione in cui le persone lo vedranno davvero.

Correggere uno sfondo che combatte il testo

La maggior parte delle correzioni aggiunge qualcosa: un riquadro, un’ombra, una fascia scura. Funzionano, ma ognuna è una toppa che fa sembrare il design salvato in extremis. Prova le correzioni in quest’ordine, dalla meno visibile alla più visibile.

Sul web, una morbida sovrapposizione a gradiente su un lato di un’immagine hero è una versione rispettabile della quinta correzione: approfondisce solo l’area sotto le parole e lascia in pace il resto della foto.

.hero {
  min-height: 70vh;
  color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(15 12 30 / 0.85) 0%, rgb(15 12 30 / 0.45) 45%, rgb(15 12 30 / 0) 70%),
    url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
}

Gradiently inserisce le correzioni meno visibili nello sfondo stesso. Un Mark sa dove sono le tue parole: la sua regione più calma e a miglior contrasto si sposta dietro il testo, i colori vicini alle lettere si approfondiscono o si alzano, i dettagli affollati si rilassano e l’Inchiostro automatico sceglie testo chiaro o scuro per ogni riga dalla palette del Mark. Niente riquadri, ombre o sfocature, e sei tu a scegliere quanto forte risponde. Come funziona l’Inchiostro automatico spiega i dettagli, e testo su un gradiente dà il metodo manuale per qualsiasi gradiente.