Tekst på bilde: sju måter å holde ordene lesbare på

Tekst på bilde holder seg lesbar når området rett bak bokstavene er rolig og tydelig lysere eller mørkere enn teksten. Sju teknikker får deg dit: beskjær slik at ordene faller på et stille område, legg til en scrim, ton bildet, gjør det uskarpt, ram inn teksten, velg tekstfarge etter lyshet, og plasser ordene der øyet allerede hviler. De fleste gode design kombinerer to av dem, og ingen av dem krever en heldekkende boks over bildet.

Det samme problemet dukker opp med gradienter og mønstrede bakgrunner, og tekst på gradient og tekst på urolige bakgrunner dekker de tilfellene. Denne guiden handler om fotografier.

Hvorfor tekst forsvinner på bilder

To ting gjør bokstaver vanskelige å lese på et bilde: lav kontrast og detaljer. Lav kontrast betyr at bokstavene ligger for nær det som er bak dem i lyshet, som hvit tekst over en lys himmel. Detaljer betyr at bakgrunnen har kanter og teksturer i samme skala som bokstavene, som blader, folkemengder eller stoff, så øyet ikke klarer å skille det ene fra det andre. Hver teknikk under reduserer én av delene eller begge.

Sju teknikker for lesbar tekst på bilder

1. Beskjær til et rolig område

Før du legger til noe, flytter du bildet. De fleste bilder har et stille område: himmel, en vegg, vann, skygge, en uskarp bakgrunn. Beskjær eller flytt utsnittet slik at ordene faller der. Dette er den eneste teknikken som ikke legger til noe, og derfor ser den renest ut. Når du fotograferer til et design, lar du den plassen stå åpen med vilje.

2. Legg til en scrim

En scrim er en myk gradient fra mørkt til gjennomsiktig, plassert bare der teksten står, som regel nederst eller øverst i bildet. Den gjør området bak ordene mørkere og toner ut før den når motivet, så det meste av bildet ser urørt ut. Det er standardteknikken for kort, hero-bilder og miniatyrbilder til 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. Ton bildet: duotone eller en fargevask

Å legge et bilde om til to farger (en duotone) eller legge en vask av én farge over det presser sammen lyshetsspennet. Bildet blir roligere og jevnere, og tekst i en kontrasterende farge leses hvor som helst på det. Det bringer også bildene inn i merkevarefargene dine, noe som er nyttig når bildene kommer fra mange kilder.

4. Gjør det uskarpt bak ordene

Uskarphet fjerner de fine detaljene som kjemper mot bokstavene, og beholder fargen og lyset i bildet. Gjør hele bildet uskarpt for en myk bakgrunn, eller bare et bånd bak teksten. Bruk nok uskarphet til at kantene forsvinner. Litt uskarphet ser bare ut som en feil. Uskarpe bakgrunner dekker hvor mye du bør bruke.

5. Ram inn teksten

Noen ganger er det riktige svaret et ryddig felt: et bånd i én farge, et panel eller et delt oppsett med bildet på den ene siden og ordene på den andre. Det er ærlig og alltid lesbart. Hent fargen på rammen fra bildet, så hører den til bildet i stedet for å dekke det.

6. Velg tekstfarge etter lyshet

Velg mellom lys og mørk tekst ut fra lysheten i området bak, ikke ut fra fargen du liker. Så sjekker du: sikt mot minst 4,5:1 for vanlig tekst og 3:1 for stor tekst, kontrastnivåene i WCAG. Hent de lyseste og mørkeste pikslene bak bokstavene og test begge med et verktøy som kontrastsjekkeren fra WebAIM. En myk skygge, som text-shadow: 0 1px 12px rgb(0 0 0 / 0.45), kan hjelpe liten tekst, men den kan ikke redde et dårlig utsnitt.

7. Plasser ordene der øyet hviler

Legg teksten dit bildet leder øyet: langs en horisont, i rommet en person ser inn i, eller på motsatt side av motivet. Unngå å legge ord over ansikter, hender eller produktet, og hold dem unna kanter som plattformene dekker med knapper eller beskjærer på noen skjermer.

Hvilken teknikk som passer til hvilket bilde

Hold tekst på bilder enhetlig i hele merkevaren

Når flere lager innlegg, velger dere én eller to teknikker og skriver dem ned: for eksempel en scrim nederst med fast styrke på alle bildeinnlegg, og en duotone i merkevarefargene til sitater. I Studio i Gradiently kan bilder beskjæres og tones i Markens farger som mono, duotone eller en vask, slik at bildeinnlegg hører til samme familie som resten av designene dine. Skriv regelen inn i merkevarehåndboken.