# Baggrund til tekst: hvad der gør ord lette at læse

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

Nogle baggrunde bærer ord ubesværet, og nogle kæmper mod hvert bogstav. Forskellen kommer ned til tre egenskaber, du kan tjekke på et minut.

## The short version

- En god baggrund til tekst har tre egenskaber, dér hvor ordene står: nok kontrast, få fine detaljer og et snævert toneområde.
- WCAG kræver et kontrastforhold på mindst 4,5:1 for normal tekst og 3:1 for stor tekst.
- Detaljer i nogenlunde samme størrelse som bogstaverne, som løv, menneskemængder eller travle mønstre, skader læsningen mere end farve gør.
- Når du kniber øjnene sammen, slører designet eller ser det i gråtoner, viser det hurtigt, om tekstområdet er roligt nok.
- At flytte ordene til en roligere del af baggrunden er som regel bedre end at lægge en boks eller en skygge bag dem.

En god **baggrund til tekst** har tre ting i området bag ordene: stærk kontrast til bogstaverne, meget få fine detaljer og et jævnt toneområde frem for lyse og mørke pletter. Farve betyder langt mindre, end folk tror. En violet gradient kan bære tekst smukt, og et gråt foto kan ødelægge den, afhængigt af de tre egenskaber. Denne guide viser, hvordan du bedømmer enhver baggrund, foto, gradient eller tekstur, og hvad du gør, når en svigter.

## Kontrast: den første egenskab

Kontrast er forskellen i lyshed mellem bogstaverne og det, der ligger direkte bag dem. Web Content Accessibility Guidelines sætter den målbare grænse: et forhold på mindst 4,5:1 for normal tekst og 3:1 for stor tekst. [WebAIMs kontrastberegner](https://webaim.org/resources/contrastchecker/) udregner det for to vilkårlige farver.

| Tekst | Baggrund | Kontrastforhold | Vurdering |
| --- | --- | --- | --- |
| Hvid `#ffffff` | Dyb indigo `#1e1b4b` | 16:1 | Fremragende i alle størrelser |
| Hvid `#ffffff` | Violet `#7c3aed` | 5,7:1 | Består til brødtekst |
| Hvid `#ffffff` | Skifergrå `#64748b` | 4,8:1 | Består lige akkurat |
| Hvid `#ffffff` | Pink `#f472b6` | 2,6:1 | Dumper, selv til stor tekst |
| Næsten sort `#1a1a1a` | Pink `#f472b6` | 6,6:1 | Består: samme pink, mørkere skrift |
| Hvid `#ffffff` | Orange `#fb923c` | 2,3:1 | Dumper |

Rigtige forhold for almindelige par. Klare pink, orange, gule og lyse petrol toner har brug for mørk tekst, uanset hvor rigtigt hvid tekst føles på dem.

På en flad farve er ét tjek nok. På en gradient eller et foto ændrer baggrunden sig under hvert ord, så tjek det lyseste punkt bag lys tekst og det mørkeste punkt bag mørk tekst. Det er dér, tekst svigter først. [Farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) går dybere ind i standarderne.

## Detaljer: hvorfor travle baggrunde er svære at læse

Kontrast er nødvendig, men ikke nok. En baggrund fuld af detaljer i samme størrelse som bogstaverne gør læsning svær, selv når forholdet består, fordi øjet ikke kan skille bogstavernes former fra formerne bag dem. Blade, grus, menneskemængder, fine striber og små mønstre er de værste syndere. Store, bløde former er de bedste: en himmel, en sløret væg, en glat gradient.

- Glat: bærer tekst godt: `linear-gradient(160deg, #1e1b4b 0%, #4c1d95 100%)`
- Ét blødt lys: ord nederst til venstre: `radial-gradient(circle at 80% 20%, #7c3aed 0%, #1e1b4b 60%)`
- Fine striber: kæmper mod hvert bogstav: `repeating-linear-gradient(45deg, #1e1b4b 0px, #1e1b4b 6px, #7c3aed 6px, #7c3aed 12px)`
- Små ringe: ulæseligt: `repeating-radial-gradient(circle at 50% 50%, #4c1d95 0px, #4c1d95 4px, #c4b5fd 4px, #c4b5fd 9px)`

De samme to farver på fire måder. Det øverste par bærer ord let; det nederste par har detaljer i bogstavstørrelse og gør al tekst til en kamp.

Tekstur er fin, når dens korn er meget mindre end bogstaverne, som filmkorn eller papirets struktur. Det bliver et problem, når teksturens elementer nærmer sig størrelsen på stregerne i din skrift. Elsker du et mønster, så skalér det op, til formerne er tydeligt større end bogstaverne, eller hold det væk fra ordene. [Tekst på travle baggrunde](https://gradiently.design/da/guide/type-on-busy-backgrounds) går mere i detaljer med mønstre, og [læselig tekst på fotos](https://gradiently.design/da/guide/readable-text-on-photos) handler om billeder.

## Toneområde: lyse og mørke pletter under én linje

Den tredje egenskab er den, folk falder i. Hvis en enkelt tekstlinje krydser både en lys og en mørk plet, kan ingen enkelt tekstfarve virke: hvid forsvinder på den lyse del og sort på den mørke. En god baggrund til tekst holder et snævert toneområde under hver linje, enten helt lyst eller helt mørkt.

Et stående opslag, hvor overskriften løber hen over lyse og mørke områder af en gradient, og dele af den er svære at læse

Overskriften krydser lyse og mørke dele af baggrunden, så nogle bogstaver forsvinder uanset skriftfarven.

Det samme opslag med et roligt, jævnt tonet område af gradienten bag overskriften, så hvert bogstav kan læses

Den samme baggrund med et jævnt, dybere område bag ordene. Nu virker én skriftfarve til hvert bogstav.

## Sådan tester du enhver baggrund til tekst

1. **Knib øjnene sammen** Luk øjnene halvt. Detaljerne forsvinder, og kun tonen bliver tilbage. Opløses ordene i baggrunden, er kontrasten for lav.
2. **Slør det** Læg en kraftig sløring på en kopi af baggrunden alene. Det, der er tilbage under tekstområdet, er den tone, bogstaverne reelt står på.
3. **Se det i gråtoner** Farve kan narre dig til at tro, at kontrasten er fin. Gråtoner viser kun lysheden, og det er den, læseligheden afhænger af.
4. **Tjek yderpunkterne** Mål kontrasten ved de lyseste og mørkeste punkter bag ordene, ikke gennemsnittet.
5. **Se det på en telefon** I en armslængdes afstand, i dagslys, i den størrelse folk faktisk vil se det.

## Sådan retter du en baggrund, der kæmper mod teksten

De fleste løsninger tilføjer noget: en boks, en skygge, et mørkt bånd. De virker, men hver af dem er et plaster, der får designet til at se reddet ud. Prøv løsningerne i denne rækkefølge, fra mindst synlig til mest.

### Prøv først

- Flyt ordene til den roligste del af baggrunden
- Beskær eller flyt baggrunden, så et roligt område ligger bag dem
- Skift skriftfarve: mørk tekst på lyse områder, lys på mørke
- Gør skriften større og federe
- Gør baggrunden dybere eller lysere kun omkring ordene

### Brug sparsomt

- Massive bokse eller bånd bag tekst
- Skygger på bogstaver
- Konturer omkring bogstaver
- Kraftig sløring over hele billedet
- Et mørkt lag over hele baggrunden

På nettet er et blidt gradientlag på den ene side af et heltebillede en anstændig udgave af den femte løsning: det gør kun området under ordene dybere og lader resten af billedet 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;
}
```

Gør venstre side, hvor overskriften står, dybere og toner ud til ingenting ved 70 procent af bredden. Tjek kontrasten ved det lyseste punkt bag teksten.

Gradiently bygger de mindst synlige løsninger ind i selve baggrunden. En Mark ved, hvor dine ord står: dens roligste område med bedst kontrast flytter ind bag teksten, farverne nær bogstaverne bliver dybere eller lysere, travle detaljer falder til ro, og Automatisk tekstfarve vælger lys eller mørk skrift til hver linje ud fra Markens palet. Der er ingen bokse, skygger eller sløring, og du vælger, hvor kraftigt den reagerer. [Sådan virker Automatisk tekstfarve](https://gradiently.design/da/guide/auto-ink-legibility) forklarer detaljerne, og [tekst på en gradient](https://gradiently.design/da/guide/text-on-gradient) giver den manuelle metode til enhver gradient.

## FAQ

### Hvad er den bedste baggrundsfarve til tekst?

Enhver farve, der står i stærk kontrast til teksten, mindst 4,5:1 for normal tekst. Meget lyse eller meget mørke baggrunde er nemmest; klare mellemtoner som pink, orange og gul kræver mørk tekst.

### Hvilket kontrastforhold kræver tekst?

WCAG kræver mindst 4,5:1 for normal tekst og 3:1 for stor tekst.

### Hvorfor er min tekst svær at læse, selvom kontrasten består?

Baggrunden har sandsynligvis detaljer tæt på bogstavernes størrelse eller lyse og mørke pletter under den samme linje. Flyt ordene til et roligere, mere jævnt område.

### Hvordan gør jeg tekst læselig på en travl baggrund?

Flyt først ordene til det roligste område, eller beskær billedet på ny. Er det ikke muligt, så gør kun området bag teksten dybere eller lysere, og brug bokse eller skygger som sidste udvej.

### Er hvid eller sort tekst lettest at læse på farve?

Det afhænger af farvens lyshed. Mørke farver kræver hvid tekst; lyse og klare farver læses som regel bedre med næsten sort.