# Bakgrunn for tekst: det som gjør ordene lette å lese

[Canonical HTML page](https://gradiently.design/nb/guide/gradient-background-for-text)

Noen bakgrunner bærer ord lett, mens andre kjemper mot hver bokstav. Forskjellen ligger i tre egenskaper du kan sjekke på ett minutt.

## The short version

- En god bakgrunn for tekst har tre egenskaper der ordene ligger: nok kontrast, få små detaljer og et smalt tonespenn.
- WCAG krever et kontrastforhold på minst 4,5:1 for vanlig tekst og 3:1 for stor tekst.
- Detaljer omtrent på størrelse med bokstavene, som blader, folkemengder eller travle mønstre, svekker lesingen mer enn farge gjør.
- Å myse på et design, gjøre det uskarpt eller vise det i gråtoner avslører raskt om tekstområdet er rolig nok.
- Å flytte ordene til en roligere del av bakgrunnen er vanligvis bedre enn å legge en boks eller skygge bak dem.

En god **bakgrunn for tekst** har tre ting i området bak ordene: sterk kontrast mot bokstavene, svært få små detaljer og jevne toner fremfor lyse og mørke flekker. Farge betyr langt mindre enn folk tror. En fiolett gradient kan bære teksten vakkert, og et grått foto kan ødelegge den, avhengig av disse tre egenskapene. Denne guiden viser hvordan du vurderer enhver bakgrunn, enten foto, gradient eller tekstur, og hva du gjør når den ikke fungerer.

## Kontrast: den første egenskapen

Kontrast er forskjellen i lyshet mellom bokstavene og det som ligger rett bak dem. Retningslinjene for tilgjengelig webinnhold setter den målbare grensen: et forhold på minst 4,5:1 for vanlig tekst og 3:1 for stor tekst. [WebAIMs kontrastsjekk](https://webaim.org/resources/contrastchecker/) beregner dette for to valgfrie farger.

| Tekst | Bakgrunn | Kontrastforhold | Vurdering |
| --- | --- | --- | --- |
| Hvitt `#ffffff` | Dyp indigo `#1e1b4b` | 16:1 | Svært godt i alle størrelser |
| Hvitt `#ffffff` | Fiolett `#7c3aed` | 5,7:1 | Består for brødtekst |
| Hvitt `#ffffff` | Skifer `#64748b` | 4,8:1 | Består så vidt |
| Hvitt `#ffffff` | Rosa `#f472b6` | 2,6:1 | Består ikke, heller ikke for stor tekst |
| Nesten svart `#1a1a1a` | Rosa `#f472b6` | 6,6:1 | Består: samme rosa, mørkere tekst |
| Hvitt `#ffffff` | Oransje `#fb923c` | 2,3:1 | Består ikke |

Faktiske forhold for vanlige fargepar. Klar rosa, oransje, gult og lyst petroleumsgrønt trenger mørk tekst, selv om hvit tekst føles riktig.

På en flat farge holder én sjekk. På en gradient eller et foto endrer bakgrunnen seg under hvert ord. Sjekk derfor det lyseste punktet bak lys tekst og det mørkeste bak mørk tekst. Det er der lesbarheten svikter først. [Fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) går grundigere inn i standardene.

## Detaljer: hvorfor travle bakgrunner er tunge å lese

Kontrast er nødvendig, men ikke nok. En bakgrunn full av detaljer på størrelse med bokstavene gjør lesingen vanskelig selv når forholdet består, fordi øyet ikke kan skille bokstavformene fra formene bak. Blader, grus, folkemengder, fine striper og små mønstre er verst. Store, myke former er best: en himmel, en uskarp vegg, en jevn gradient.

- Jevn: bærer tekst godt: `linear-gradient(160deg, #1e1b4b 0%, #4c1d95 100%)`
- Ett mykt lys: ord nederst til venstre: `radial-gradient(circle at 80% 20%, #7c3aed 0%, #1e1b4b 60%)`
- Fine striper: kjemper mot bokstavene: `repeating-linear-gradient(45deg, #1e1b4b 0px, #1e1b4b 6px, #7c3aed 6px, #7c3aed 12px)`
- Små ringer: uleselig: `repeating-radial-gradient(circle at 50% 50%, #4c1d95 0px, #4c1d95 4px, #c4b5fd 4px, #c4b5fd 9px)`

De samme to fargene på fire måter. Det øverste paret bærer ord lett; det nederste har detaljer i bokstavstørrelse som gjør all tekst vanskelig.

Tekstur er greit når kornet er mye mindre enn bokstavene, som filmkorn eller papirstruktur. Det blir et problem når teksturens trekk nærmer seg størrelsen på strekene i skriften. Hvis du liker et mønster, skaler det opp til formene er tydelig større enn bokstavene, eller hold det unna ordene. [Tekst på travle bakgrunner](https://gradiently.design/nb/guide/type-on-busy-backgrounds) dekker mønstre grundigere, og [lesbar tekst på foto](https://gradiently.design/nb/guide/readable-text-on-photos) dekker bilder.

## Tonespenn: lyse og mørke flekker under én linje

Den tredje egenskapen er den folk lett overser. Hvis én tekstlinje krysser både et lyst og et mørkt felt, fungerer ingen enkelt tekstfarge: hvitt forsvinner på det lyse og svart på det mørke. En god bakgrunn for tekst holder et smalt tonespenn under hver linje, helt lyst eller helt mørkt.

Et stående innlegg der overskriften går over lyse og mørke gradientområder og deler av den er vanskelige å lese

Overskriften krysser lyse og mørke deler av bakgrunnen, så noen bokstaver forsvinner uansett tekstfarge.

Det samme innlegget med et rolig, jevnt gradientområde bak overskriften så hver bokstav kan leses

Samme bakgrunn med et jevnt, dypere område bak ordene. Én tekstfarge fungerer nå for alle bokstavene.

## Slik tester du enhver bakgrunn for tekst

1. **Mys** Lukk øynene halvveis. Detaljer forsvinner, og bare toner står igjen. Hvis ordene glir inn i bakgrunnen, er kontrasten for lav.
2. **Gjør den uskarp** Legg kraftig uskarphet på en kopi av bare bakgrunnen. Det som blir igjen under tekstområdet, er tonen bokstavene faktisk ligger på.
3. **Vis i gråtoner** Farge kan lure deg til å tro at kontrasten er god. Gråtoner viser bare lyshet, som er det lesbarheten avhenger av.
4. **Sjekk ytterpunktene** Mål kontrast ved de lyseste og mørkeste punktene bak ordene, ikke gjennomsnittet.
5. **Se på den på mobilen** På armlengdes avstand, i dagslys og i størrelsen folk faktisk ser den.

## Rett en bakgrunn som kjemper mot teksten

De fleste løsninger legger til noe: en boks, en skygge, et mørkt felt. De fungerer, men hver er en lapp som får designet til å se reddet ut. Prøv løsningene i denne rekkefølgen, fra minst til mest synlig.

### Prøv først

- Flytt ordene til den roligste delen av bakgrunnen
- Beskjær eller flytt bakgrunnen så et rolig område ligger bak dem
- Bytt tekstfarge: mørk på lyse områder, lys på mørke
- Gjør skriften større og tyngre
- Mørkne eller lysne bakgrunnen bare rundt ordene

### Bruk sparsomt

- Ensfarvede bokser eller felter bak teksten
- Slagskygger på bokstavene
- Konturer rundt bokstavene
- Kraftig uskarphet over hele bildet
- Et mørkt overlegg på hele bakgrunnen

På nettet er et forsiktig gradientoverlegg på én side av et toppbilde en god variant av den femte løsningen: det mørkner bare området under ordene og lar resten av bildet være.

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

Mørkner venstre side, der overskriften ligger, og toner ut ved 70 prosent av bredden. Sjekk kontrasten på det lyseste punktet bak teksten.

Gradiently bygger de minst synlige løsningene inn i selve bakgrunnen. En Mark vet hvor ordene dine er: det roligste området med best kontrast flytter seg bak teksten, farger nær bokstavene mørkner eller lysner, travle detaljer dempes, og Auto-tekstfarge velger lys eller mørk skrift til hver linje fra Markens palett. Det er ingen bokser, skygger eller uskarphet, og du velger hvor sterkt den reagerer. [Slik fungerer Auto-tekstfarge](https://gradiently.design/nb/guide/auto-ink-legibility) forklarer detaljene, og [tekst på en gradient](https://gradiently.design/nb/guide/text-on-gradient) gir den manuelle metoden for alle gradienter.

## FAQ

### Hvilken bakgrunnsfarge er best til tekst?

Enhver farge som gir sterk kontrast mot teksten, minst 4,5:1 for vanlig tekst. Svært lyse eller mørke bakgrunner er enklest; klare mellomtoner som rosa, oransje og gult trenger mørk tekst.

### Hvilket kontrastforhold trenger tekst?

WCAG krever minst 4,5:1 for vanlig tekst og 3:1 for stor tekst.

### Hvorfor er teksten tung å lese selv om kontrasten består?

Bakgrunnen har antakelig detaljer nær bokstavstørrelsen, eller lyse og mørke flekker under samme linje. Flytt ordene til et roligere, jevnere område.

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

Flytt først ordene til det roligste området eller endre utsnittet. Hvis det ikke går, mørkne eller lysne bare området bak teksten, og bruk bokser eller skygger som siste utvei.

### Er hvit eller svart tekst lettest å lese på farge?

Det avhenger av fargens lyshet. Mørke farger trenger hvit tekst; lyse og klare farger er vanligvis lettere å lese med nesten svart.