# Tekst på urolig bakgrunn, lesbar uten boks

[Canonical HTML page](https://gradiently.design/nb/guide/type-on-busy-backgrounds)

De vanlige løsningene er et mørkt panel, en skygge eller uskarphet. Alle virker, og alle gjør oppmerksom på seg selv. Det finnes en stillere måte å få ord til å leses på.

## The short version

- Tekst på en urolig bakgrunn er vanskelig å lese fordi kontrasten endrer seg fra bokstav til bokstav, og kantene i bakgrunnen konkurrerer med bokstavformene.
- Bokser, scrim, skygger og uskarphet gjør alle teksten lesbar, men hver av dem dekker en del av bakgrunnen og endrer hvordan designet føles.
- Å legge ordene over det roligste, jevneste området i en bakgrunn er løsningen som koster designet minst.
- Å velge lys eller mørk tekstfarge for hver linje, ut fra det som faktisk ligger bak den, holder hver linje lesbar på en bakgrunn som går fra lyst til mørkt.
- En bakgrunn som ordner seg på nytt rundt ordene, og blir roligere og dypere bak dem, kan gjøre teksten lesbar uten noen synlig lapp.

Å gjøre **tekst på urolig bakgrunn** lesbar handler om to ting: hva som ligger rett bak bokstavene, og hvilken farge bokstavene har. De vanlige løsningene, en boks, en skygge eller uskarphet, endrer det som ligger bak bokstavene ved å dekke det til. De bedre løsningene legger ordene der bakgrunnen allerede er rolig, velger tekstfarge for hver linje og lar, der verktøyet tillater det, bakgrunnen gi plass i stedet for å bli lappet over.

En overskrift satt rett over en detaljert gradienttekstur, der bokstavene konkurrerer med bakgrunnen

Overlatt til seg selv: teksturen går rett gjennom ordene.

Samme overskrift og tekstur, med den roligste delen av bakgrunnen flyttet bak ordene

Gir plass: den rolige delen av teksturen ligger bak dem.

## Hvorfor urolige bakgrunner og tekst kjemper

Lesing er avhengig av kontrast mellom hver bokstav og det som omgir den. På en ensfarget flate er den kontrasten lik overalt. På et bilde, et mønster eller en livlig gradient endrer den seg hele tiden: én bokstav står på et høylys, den neste på en skygge, og ordet faller fra hverandre. Detaljer gjør det verre, fordi bakgrunnens egne kanter og former ligner litt på strekene i bokstaver, og øyet må skille de to.

Derfor er kontrastretningslinjer, som forholdstallene i [fargekontrast](https://gradiently.design/nb/guide/color-contrast-accessibility), vanskelige å bruke på urolige bakgrunner: det finnes ikke én bakgrunnsfarge å måle mot. Den ærlige testen er det verste punktet, det lyseste området bak lys tekst eller det mørkeste bak mørk tekst.

## De vanlige løsningene, og hva hver av dem koster

Alle standardløsninger virker ved å endre det som ligger rett bak bokstavene. De er alle legitime, og alle tar noe fra bakgrunnen du valgte.

| Løsning | Hvordan den virker | Hva den koster |
| --- | --- | --- |
| Heldekkende boks | Et panel i én farge bak teksten | Dekker bakgrunnen og ser ut som en etikett |
| Halvgjennomsiktig panel | En gjennomsiktig boks som gjør mørkere eller lysere | Grumser til fargene under, og kanten synes |
| Scrim | En myk gradient som toner mot mørkt bak teksten | Gjør en hel side av bildet mørkere |
| Skygge | En mørk glorie rundt hver bokstav | Ser utdatert ut når den er tung, grumsete på farge |
| Uskarpt felt | Gjør bakgrunnen uskarp bak ordene | Ser uferdig ut og røper hvor teksten står |
| Konturstrek | En kontrasterende linje rundt hver bokstav | Endrer karakteren i skriften |

Seks vanlige løsninger. Hver av dem virker, og hver av dem synes.

Bruker du en av dem, så bruk den varsomt. En scrim som toner ut over et stort område, er mindre synlig enn en boks, og en myk, bred skygge ser mindre utdatert ut enn en hard. Dette er en behersket versjon for nettet:

```css
.hero {
  position: relative;
}

/* A soft scrim: dark at the bottom, where the text sits, gone by the middle. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.2) 35%, rgb(0 0 0 / 0) 60%);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  /* A wide, faint shadow reads as depth, not as an outline. */
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.35);
}
```

En varsom scrim og skygge. Sjekk resultatet med en kontrastsjekker som [den fra WebAIM](https://webaim.org/resources/contrastchecker/) på det lyseste punktet bak teksten.

## Bedre: legg ordene der bakgrunnen er rolig

De fleste urolige bakgrunner har et stillere område: et stykke himmel, en myk fargeflate, et felt ute av fokus. Å flytte teksten dit, eller beskjære slik at området havner der teksten står, løser problemet uten å dekke til noe. Når du velger eller lager en bakgrunn, ser du etter en med et rolig område der ordene dine pleier å stå.

- Urolig: teksten vil kjempe mot dette: `repeating-linear-gradient(45deg, #1d3557 0px, #1d3557 12px, #e63946 12px, #e63946 24px, #f1faee 24px, #f1faee 36px)`
- En rolig flate i midten: `radial-gradient(ellipse at 50% 50%, #f1faee 0%, #a8dadc 35%, #457b9d 70%, #1d3557 100%)`

De samme tre fargene, to svært ulike grunner for ord. Striper gir hver bokstav en ny bakgrunn, mens et radialt felt gir midten en jevn, lys flate der mørk tekst leses rent.

Den samme tanken gjelder fotografier, der beskjæring, uskarphet og duotone alle kan skape ro, og [tekst på bilde](https://gradiently.design/nb/guide/text-over-image) går gjennom sju teknikker. På gradienter er det rolige området som regel der fargen endrer seg saktest, og [tekst på gradient](https://gradiently.design/nb/guide/text-on-gradient) viser hvordan du finner det.

## Velg tekstfarge for hver linje

En bakgrunn som går fra lyst til mørkt, kan ikke betjenes av én tekstfarge. Hvit tekst leses på den mørke halvdelen og forsvinner på den lyse. I stedet for å tvinge et panel inn bak den velger du tekstfarge per linje: lys der bakgrunnen bak linjen er mørk, mørk der den er lys. Hent begge fargene fra bakgrunnens egen palett, en dyp tone og en blek, så føles de som en del av designet og ikke som noe påklistret.

### Én tekstfarge til alt

- Hvit overskrift over et lyst og mørkt felt
- Halvparten av bokstavene mister kontrast
- En boks legges til for å redde den
- Bakgrunnen forsvinner under boksen

### Tekstfarge valgt per linje

- Hver linje sjekket mot det som ligger bak
- Lys tekst over mørke områder, mørk tekst over lyse
- Begge tekstfargene hentet fra bakgrunnens palett
- Ingen lapp trengs

## La bakgrunnen flytte seg, ikke ordene

Den stilleste løsningen av alle er en bakgrunn som vet hvor ordene står. Slik oppfører en Mark fra Gradiently seg: i stedet for å bli dekket til ordner den seg på nytt. Hele materialet glir slik at det roligste området med best kontrast havner bak teksten. Nær bokstavene blir fargene dypere under lys tekst og lysere under mørk tekst, og urolige rygger slapper av. Ingenting av dette er en form du kan peke på. Det leses som designet, fordi det er designet.

Den andre halvdelen er tekstfargen. Sett teksten til **Auto blekk**, så velger hver linje den lyse eller mørke fargen som leses best mot det som faktisk ligger bak, fra et par hentet fra Markens egen palett. Flytt en overskrift fra et lyst område til et mørkt, så skifter den stille. Du bestemmer hvor sterkt bakgrunnen svarer: knapt merkbart, balansert eller en tydelig scene for en overskrift som må sitte.

> Den beste løsningen for lesbarhet er den ingen legger merke til.

## En sjekkliste for tekst på urolig bakgrunn

1. **Finn det rolige området først** Plasser eller beskjær slik at ordene står over den jevneste delen av bakgrunnen.
2. **Sjekk det verste punktet** Test kontrasten på det lyseste punktet bak lys tekst eller det mørkeste bak mørk tekst, ikke gjennomsnittet.
3. **Velg tekstfarge per linje** Lyst over mørkt, mørkt over lyst, begge hentet fra bakgrunnens palett.
4. **Bruk vekt og størrelse** Kraftigere og større skrift tåler mer urolige bakgrunner. Hårtynne vekter gjør det ikke. [Skrifter for sosiale medier](https://gradiently.design/nb/guide/fonts-for-social-media) har skrifter som holder.
5. **Lapp bare som siste utvei** Må du, så bruk den varsomste løsningen: en myk scrim fremfor en boks, en bred og svak skygge fremfor en hard.

## FAQ

### Hvordan gjør jeg tekst lesbar på en urolig bakgrunn?

Legg ordene over den roligste delen av bakgrunnen, velg lys eller mørk tekstfarge for hver linje ut fra det som ligger bak, og bruk en kraftigere og større vekt. Bruk en myk scrim bare hvis det ikke er nok.

### Er en skygge en god måte å gjøre tekst lesbar på?

En myk, bred og svak skygge kan hjelpe. En hard, tung skygge får teksten til å se utdatert ut og grumser til fargen, så bruk den sparsomt.

### Hvordan sjekker jeg kontrasten på en urolig bakgrunn?

Mål på det verste punktet, for eksempel det lyseste området bak lys tekst, i stedet for gjennomsnittsfargen. En kontrastsjekker gir forholdstallet for det paret.

### Hva er Auto blekk i Gradiently?

Auto blekk velger lys eller mørk tekst for hver linje fra Markens egen palett, ut fra det som faktisk ligger bak linjen, og skifter hvis teksten flyttes.