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

[Canonical HTML page](https://gradiently.design/nb/guide/text-over-image)

Et bilde som ser flott ut alene, kan sluke enhver overskrift du legger på det. Disse sju teknikkene holder ordene lesbare uten å gjemme bildet bak en boks.

## The short version

- Tekst på et bilde er lesbar når området rett bak bokstavene er rolig og tydelig lysere eller mørkere enn teksten.
- Den raskeste løsningen er ofte et bedre utsnitt som legger ordene over himmel, vegg, skygge eller en annen stille del av bildet.
- En scrim, en myk gradient fra mørkt til gjennomsiktig bak teksten, holder ordene lesbare mens det meste av bildet står urørt.
- Duotone, uskarphet og fargevask roer ned et urolig bilde, slik at teksten kan stå hvor som helst på det.
- Sjekk kontrasten der teksten faktisk står, og sikt mot minst 4,5:1 for vanlig tekst og 3:1 for stor tekst.

**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](https://gradiently.design/nb/guide/text-on-gradient) og [tekst på urolige bakgrunner](https://gradiently.design/nb/guide/type-on-busy-backgrounds) 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.

Et stående innlegg der overskriften går over den mest urolige delen av en fargerik bakgrunn og er vanskelig å lese

Ord rett over et urolig felt: lysstyrke og detaljer konkurrerer med bokstavene.

Det samme stående innlegget med bakgrunnen roet ned og gjort dypere bak overskriften, så den leses tydelig

Det samme designet med et roligere område med bedre kontrast bak ordene.

## 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.

```css
.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;
}
```

En scrim nederst med tre stopp, så uttoningen ikke får noen synlig kant. Hold det mørkeste punktet under ordene, ikke over hele bildet.

### 3. Ton bildet: duotone eller en fargevask

Å legge et bilde om til to farger (en [duotone](https://gradiently.design/nb/guide/duotone-effect)) 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.

- Skyggeblekk: #1b1340
- Høylys fersken: #f7c7a3
- Tekst på skygge: #ffffff
- Tekst på høylys: #1b1340

Et duotonepar og de to tekstfargene. Fordi bildet bare inneholder toner mellom de to, leses hvitt på den mørke halvdelen og dypt blekk på den lyse.

### 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](https://gradiently.design/nb/guide/blurred-background) 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](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). Hent de lyseste og mørkeste pikslene bak bokstavene og test begge med et verktøy som [kontrastsjekkeren fra WebAIM](https://webaim.org/resources/contrastchecker/). 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

| Bilde | Førstevalg | Reserve |
| --- | --- | --- |
| Tydelig stille område, som himmel eller vegg | Beskjær til det | Lett scrim for ekstra margin |
| Urolig over det hele, som folkemengder eller løvverk | Duotone eller fargevask | Gjør hele bildet uskarpt |
| Motiv øverst, detaljer nederst | Scrim nederst | Ram inn med et fargebånd |
| Lyst og med høy kontrast | Mørk tekst over det lyseste området | Fargevask som presser sammen spennet |
| Mange bilder som må se enhetlige ut | Samme toning på alle | Samme scrim på alle |

Start med det letteste inngrepet som fungerer, og kombiner to bare når ett ikke er nok.

### Unngå

- En heldekkende boks klasket midt over bildet
- Tunge konturer eller glød rundt hver bokstav
- Tekst over et ansikt eller produktet
- Å sjekke kontrasten bare på arbeidsflaten

### Gjør

- Beskjær først, og legg så til minst mulig
- En myk scrim som toner ut før motivet
- Ord i plassen bildet lar stå åpen
- Å sjekke i ekte størrelse på en mobil

## 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](https://gradiently.design/nb/guide/brand-style-guide).

## FAQ

### Hvordan gjør du tekst lesbar på et bilde?

Legg ordene over et rolig område med sterk kontrast. Beskjær først til en stille del av bildet, legg så til en scrim, toning eller uskarphet ved behov, og velg lys eller mørk tekst etter lysheten bak.

### Hva er en scrim i design?

En scrim er en myk gradient fra mørkt (eller lyst) til gjennomsiktig som legges bak tekst på et bilde. Den bedrer kontrasten der ordene står, mens det meste av bildet fortsatt er synlig.

### Hvilket kontrastforhold trenger tekst på et bilde?

WCAG ber om minst 4,5:1 for vanlig tekst og 3:1 for stor tekst. På bilder sjekker du de lyseste og mørkeste punktene bak bokstavene, ikke et gjennomsnitt.

### Er en tekstskygge nok til å gjøre teksten lesbar?

Sjelden alene. En myk skygge hjelper liten tekst med å skille seg fra bakgrunnen, men et rolig utsnitt, en scrim eller en toning gjør det meste av jobben.