Testo su immagine: sette modi per mantenere leggibili le parole

Il testo su immagine resta leggibile quando la zona subito dietro le lettere è calma e nettamente più chiara o più scura del testo. Ci si arriva con sette tecniche: ritagliare in modo che le parole cadano su una zona tranquilla, aggiungere uno scrim, colorare la foto, sfocarla, incorniciare il testo, scegliere il colore del testo in base alla luminosità e mettere le parole dove l’occhio già si posa. La maggior parte dei buoni design ne combina due, e nessuna richiede un riquadro pieno sopra la foto.

Lo stesso problema si presenta con gradienti e sfondi a motivo; il testo su un gradiente e il testo su sfondi carichi coprono quei casi. Questa guida si concentra sulle foto.

Perché il testo sparisce sulle foto

Due cose rendono le lettere difficili da leggere su un’immagine: il contrasto basso e il dettaglio. Contrasto basso significa che le lettere hanno una luminosità troppo vicina a ciò che sta dietro, come un testo bianco su un cielo luminoso. Dettaglio significa che lo sfondo ha bordi e texture della stessa scala delle lettere, come foglie, folle o tessuti, e l’occhio non riesce a separare le une dagli altri. Ogni tecnica qui sotto riduce uno dei due, o entrambi.

Sette tecniche per un testo leggibile sulle immagini

1. Ritaglia su una zona calma

Prima di aggiungere qualcosa, sposta la foto. La maggior parte delle foto ha una zona tranquilla: cielo, un muro, acqua, ombra, uno sfondo sfocato. Ritaglia o riposiziona in modo che le parole cadano lì. È l’unica tecnica che non aggiunge nulla, ed è per questo che sembra la più pulita. Quando scatti per un design, lascia quello spazio di proposito.

2. Aggiungi uno scrim

Uno scrim è una sfumatura morbida dallo scuro al trasparente, messa solo dove si trova il testo, di solito in basso o in alto nell’immagine. Scurisce la zona dietro le parole e svanisce prima di arrivare al soggetto, così la maggior parte della foto sembra intatta. È la tecnica standard per card, immagini hero e miniature video.

.photo-card {
  position: relative;
  isolation: isolate;
}

.photo-card img {
  position: relative;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The scrim: dark at the bottom, clear by 60% up. */
.photo-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.72) 0%,
    rgb(0 0 0 / 0.38) 30%,
    rgb(0 0 0 / 0) 60%
  );
}

.photo-card h2 {
  position: absolute;
  inset-inline: 1.5rem;
  bottom: 1.5rem;
  color: #fff;
  text-wrap: balance;
}

3. Colora la foto: duotone o velatura

Ridurre una foto a due colori (un duotone) o stendere sopra una velatura di un solo colore ne comprime la gamma di luminosità. La foto diventa più calma e uniforme, e un testo di colore contrastante si legge ovunque. Porta anche le foto nei colori del tuo brand, cosa utile quando le immagini arrivano da molte fonti.

4. Sfoca dietro le parole

La sfocatura elimina il dettaglio fine che combatte con le lettere, mantenendo colore e luce della foto. Sfoca tutta l’immagine per uno sfondo morbido, oppure solo una fascia dietro il testo. Usa una sfocatura sufficiente a far sparire i bordi; una sfocatura leggera sembra soltanto un errore. Gli sfondi sfocati spiega quanta usarne.

5. Incornicia il testo

A volte la risposta giusta è uno spazio libero: una fascia di colore pieno, un pannello, o un layout diviso con la foto da una parte e le parole dall’altra. È onesto e sempre leggibile. Prendi il colore della cornice dalla foto, così appartiene all’immagine invece di coprirla.

6. Scegli il colore del testo in base alla luminosità

Decidi tra testo chiaro e scuro in base alla luminosità della zona dietro, non al colore che ti piace. Poi verificalo: punta ad almeno 4,5:1 per il testo normale e 3:1 per il testo grande, i livelli di contrasto WCAG. Preleva i pixel più chiari e più scuri dietro le lettere e provali entrambi con uno strumento come il WebAIM contrast checker. Un’ombra morbida, come text-shadow: 0 1px 12px rgb(0 0 0 / 0.45), può aiutare il testo piccolo, ma non può salvare un cattivo ritaglio.

7. Metti le parole dove l’occhio si posa

Metti il testo dove la foto guida lo sguardo: lungo un orizzonte, nello spazio verso cui guarda una persona, o di fronte al soggetto. Evita di mettere parole sopra volti, mani o il prodotto, e tienile lontane dai bordi che le piattaforme coprono con pulsanti o ritagliano su alcuni schermi.

Quale tecnica usare per quale foto

Mantenere coerente il testo sulle immagini in tutto il brand

Quando più persone creano post, scegli una o due tecniche e mettile per iscritto: per esempio, uno scrim in basso con un’intensità fissa per ogni post con foto, e un duotone nei colori del brand per le citazioni. Nello Studio di Gradiently, le foto si possono ritagliare e colorare nei colori del Mark come mono, duotone o lavaggio, così i post con foto stanno nella stessa famiglia del resto dei tuoi design. Annota la regola nella tua guida di stile del brand.