# Tekst på gradient: slik blir den lesbar hver gang

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

En gradient endrer seg under hver bokstav, så en farge som leses i den ene enden, kan forsvinne i den andre. Her er metoden som holder ordene lesbare gjennom hele overgangen.

## The short version

- Tekst på en gradient er vanskelig å få til fordi lysheten i bakgrunnen endrer seg under ordene, så én tekstfarge kan ha sterk kontrast i den ene enden og svak i den andre.
- Det beste stedet for tekst på en gradient er det rolige området, strekningen der fargen endrer seg saktest.
- Velg tekstfarge etter lysheten i fargen bak, ikke etter fargetone: hvit eller nesten hvit over mørke stopp, nesten svart over lyse.
- Farger med middels lyshet i en gradient er en felle, fordi verken hvit eller svart tekst har mye kontrast å gå på mot dem.
- Sjekk kontrasten på det verste punktet bak teksten, og se på designet i mobilstørrelse og i gråtoner før du publiserer.

For at **tekst på gradient** alltid skal være lesbar, legger du ordene over den roligste strekningen i gradienten, velger lys eller mørk tekstfarge etter lysheten i fargen rett bak, holder liten tekst unna mellomtonene og tester kontrasten på det verste punktet, ikke gjennomsnittet. Størrelse og vekt gjør resten: stor, solid skrift tåler en bakgrunn i endring som tynn, liten skrift ikke klarer.

## Hvorfor tekst på en gradient er vanskeligere enn det ser ut

På en ensfarget flate er kontrasten mellom tekst og bakgrunn ett tall. På en gradient endrer den seg langs overgangen. Hvit tekst kan være skarp mot den mørke enden og nesten usynlig mot den lyse, noen ganger innenfor ett enkelt ord. Gradienten under viser hvor fort det skjer.

Indigonatt til rødme: `linear-gradient(90deg, #1e1b4b 0%, #7c3aed 35%, #c026d3 55%, #ec4899 75%, #fbcfe8 100%)`

Én gradient, fem svært ulike bakgrunner for tekst. Hvitt leses til venstre, nesten svart til høyre, og den magenta midten passer ikke spesielt godt til noen av dem.

| Fargen bak teksten | Hvit (#ffffff) | Nesten svart (#0b0b14) | Bruk |
| --- | --- | --- | --- |
| Indigonatt `#1e1b4b` | 16,0:1 | 1,2:1 | Hvit |
| Fiolett `#7c3aed` | 5,7:1 | 3,4:1 | Hvit |
| Magenta `#c026d3` | 4,7:1 | 4,2:1 | Ingen av dem har mye å gå på |
| Rosa `#ec4899` | 3,5:1 | 5,5:1 | Nesten svart |
| Rødme `#fbcfe8` | 1,4:1 | 14,2:1 | Nesten svart |

Kontrastforhold for hvert stopp i gradienten over, regnet ut med WCAG-formelen. Brødtekst trenger minst 4,5:1, stor tekst trenger 3:1.

Tersklene kommer fra [WCAGs veiledning om kontrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html): **4,5:1** for vanlig tekst og **3:1** for stor tekst, omtrent 24 piksler og oppover, eller rundt 19 piksler i fet. [Fargekontrast](https://gradiently.design/nb/guide/color-contrast-accessibility) forklarer reglene med enkle ord.

## Steg 1: finn det rolige området

Hver gradient har strekninger der fargen endrer seg sakte, og strekninger der den endrer seg fort. Teksten hører hjemme i den sakte delen, fordi kontrasten under den holder seg nesten konstant. På en lineær gradient er det som regel den ene enden, på en radial gradient er det midten eller ytterkanten, og på en mesh eller aurora er det den fargeflaten som er størst og jevnest.

- Rolig venstre: teksten står her: `linear-gradient(90deg, #0f172a 0%, #0f172a 40%, #6d28d9 75%, #f472b6 100%)`
- Rolig midte: teksten står her: `radial-gradient(ellipse at 50% 45%, #fdf2f8 0%, #fbcfe8 30%, #db2777 75%, #500724 100%)`

To gradienter som er bygget med et rolig område med vilje. Den første holder én mørk farge i de venstre 40 prosentene, den andre har en bred, blek flate i midten for mørk tekst.

Styrer du gradienten selv, bygger du inn det rolige området: hold en farge lenger ved å gjenta et stopp, slik det første eksempelet gjør. Har du fått gradienten utlevert, flytter du teksten i stedet for å kjempe mot den.

## Steg 2: velg tekstfarge etter lyshet, ikke fargetone

Kontrast handler om lyshet. En sterk fiolett og en sterk oransje kan se like kraftige ut, men hvitt leses godt på den fiolette og dårlig på den oransje, fordi oransje er mye lysere. Når du velger tekstfarge, ser du bort fra fargetonen og spør: er fargen bak denne linjen mørk eller lys?

### Unngå

- Å velge tekstfarge som matcher fargetonen, som rosa tekst på en rosa gradient
- Én hvit overskrift strukket over både mørk og lys ende
- Å bedømme kontrast på øyemål på en lyssterk skjerm
- Farget tekst på en mettet bakgrunn

### Gjør

- Lys tekst over mørke stopp, mørk tekst over lyse
- Linjer plassert slik at hver av dem står over én lyshet
- Å måle forholdet på det verste punktet
- En nesten hvit eller nesten svart hentet fra gradientens egen familie

Tonede tekstfarger føles mer gjennomtenkte enn ren hvit og svart. Ta en svært blek tone av gradientens lyseste farge og en svært dyp nyanse av den mørkeste. De bærer paletten inn i skriften og har som regel nok kontrast. [Grumsete gradienter](https://gradiently.design/nb/guide/muddy-gradients) forklarer hvorfor midten av en overgang mister lyshetskontrast i utgangspunktet.

## Steg 3: hold deg unna mellomtonefellen

Se på magentaraden i tabellen: 4,7:1 med hvit og 4,2:1 med nesten svart. Ingen av tekstfargene har mye å gå på. Farger med middels lyshet ligger midt i de fleste gradienter, akkurat der folk pleier å midtstille teksten. Liten tekst der blir på grensen uansett hvilken tekstfarge du velger.

- **Flytt teksten** mot den mørkere eller lysere enden.
- **Forskyv gradienten** slik at stoppet bak teksten blir mørkere eller lysere.
- **Gjør teksten stor og fet**, slik at den lavere terskelen på 3:1 for stor tekst gjelder.
- **Spar mellomtonene** til pynt, former og luft, ikke ord.

```css
.banner {
  /* The dark stop is held to 45%, so the headline on the left sits on one lightness. */
  background: linear-gradient(90deg, #1e1b4b 0%, #1e1b4b 45%, #7c3aed 70%, #ec4899 100%);
  color: #f5f3ff; /* a pale violet tint rather than pure white */
}

.banner h1 {
  max-width: 40%;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
}
```

Det rolige området bygget inn i en CSS-gradient: overskriften er begrenset til de venstre 40 prosentene, som ligger helt på det mørke stoppet.

## Steg 4: bruk størrelse og vekt

Kraftigere og større bokstaver har mer flate og leses som former, så de tåler en bakgrunn i endring bedre. Hårtynne og lette vekter brytes opp når fargen bak dem skifter. På en gradient setter du brødtekst i regular, medium eller bold i stedet for lette vekter, og holder overskriftene romslige. [Skrifter for sosiale medier](https://gradiently.design/nb/guide/fonts-for-social-media) lister opp solide skrifter som leses på mobil.

Et stående innlegg med en fet overskrift plassert over det roligste området i en gradientbakgrunn

Stor, solid skrift plassert på den roligste delen av gradienten, med tekstfarge valgt etter det som ligger bak.

## Steg 5: test i mobilstørrelse og i gråtoner

1. **Mål det verste punktet** Hent den lyseste fargen bak lys tekst, eller den mørkeste bak mørk tekst, og sjekk forholdet.
2. **Se det i gråtoner** Fjern metningen i en kopi av designet. Når fargetonen er borte, blir svak lyshetskontrast åpenbar.
3. **Se på det på en mobil** På en armlengdes avstand, helst i dagslys. Liten tekst på gradienter svikter der først.
4. **Mys** Lukk øynene halvveis. Teksten skal fortsatt skille seg fra bakgrunnen som en form.

For bakgrunner som er mer urolige enn en gradient, som bilder og teksturer, se [tekst på urolige bakgrunner](https://gradiently.design/nb/guide/type-on-busy-backgrounds). I Gradiently flytter Marks det roligste området sitt bak ordene, og **Auto blekk** velger lys eller mørk tekst for hver linje fra Markens egen palett, så metoden over skjer mens du skriver.

## FAQ

### Hvilken tekstfarge fungerer på en gradientbakgrunn?

Det kommer an på lysheten bak teksten: hvit eller en blek tone over mørke stopp, nesten svart eller en dyp nyanse over lyse stopp. Fargetonen betyr langt mindre enn lysheten.

### Hvordan sjekker jeg kontrasten på en gradient?

Mål forholdet på det verste punktet bak teksten, ikke gjennomsnittet. Vanlig tekst trenger minst 4,5:1 og stor tekst minst 3:1.

### Hvor bør teksten stå på en gradient?

Over det rolige området, der fargen endrer seg saktest, som regel den ene enden av en lineær gradient eller midten av en radial.

### Hvorfor er teksten vanskelig å lese midt i gradienten min?

Farger med middels lyshet gir svak kontrast mot både hvit og svart tekst. Flytt teksten mot en ende, forskyv gradienten, eller gjør teksten stor og fet.