# Automatisk tekstfarve: lys eller mørk tekst til hver linje

[Canonical HTML page](https://gradiently.design/da/guide/auto-ink-legibility)

En gradient er lys det ene sted og mørk det andet, så ingen enkelt tekstfarve passer til det hele. Automatisk tekstfarve afgør det linje for linje, og Marken hjælper bagfra.

## The short version

- Automatisk tekstfarve er en indstilling i Gradiently, der vælger lys eller mørk tekst til hver tekstlinje, alt efter hvad der kan læses bedst på den del af Marken, der ligger lige bagved.
- Begge farver kommer fra Markens egen palet, så teksten altid hører til baggrunden frem for at falde tilbage på ren hvid eller sort.
- Tekst kan også fastlåses til den lyse eller den mørke farve, når du vil have én farve uanset baggrunden.
- Automatisk tekstfarve virker sammen med Markens reaktion, som lægger materialet til ro bag ordene, fra Fra over Usynlig, Diskret og Tydelig til Markant.
- Ingen af dem bruger bokse, skygger eller sløring, og du vælger selv, hvor kraftigt Marken reagerer.

**Automatisk tekstfarve** er den måde, Gradiently vælger farven på din tekst. For hver tekstlinje, der er sat til Automatisk, ser den på den del af Marken, der ligger lige bagved, og vælger enten den lyse eller den mørke farve, alt efter hvad der kan læses bedst dér. Begge farver kommer fra Markens egen palet, så en overskrift over et blegt hjørne bliver mørk, mens en billedtekst over et mørkt bånd bliver lys, og begge ligner stadig det samme brand.

## Hvorfor én tekstfarve fejler på en gradient

På en flad baggrund vælger du tekstfarven én gang. En gradient ændrer sig, mens den løber: toppen af en story kan være næsten hvid og bunden næsten sort. Hvid tekst, der læses smukt nederst, forsvinder øverst, og en lang overskrift kan krydse begge dele. Det er kerneproblemet i [tekst på gradientbaggrund](https://gradiently.design/da/guide/text-on-gradient), og de sædvanlige løsninger, bokse bag ordene og slagskygger, dækker netop den baggrund, du valgte.

En lodret story om et værkstedssalg, hvor tekstfarven kæmper mod lysere og mørkere områder af gradienten

Én fast farve hen over en skiftende baggrund: dele af teksten kæmper mod materialet.

Den samme story om værkstedssalget med hver linje i den lyse eller mørke farve, der kan læses bedst, og roligere materiale bag ordene

Automatisk tekstfarve med Marken som reagerer: hver linje får den farve, der kan læses, og materialet lægger sig til ro bagved.

## Sådan vælger Automatisk tekstfarve lys eller mørk

Hver Mark har en lys og en mørk tekstfarve hentet fra sin palet: en bleg tone og en dyb tone, der hører til dens farver. Når en linje er sat til Automatisk, måler Gradiently materialet i det område, linjen dækker, og giver den den farve, der træder tydeligst frem. Flyt teksten, og valget følger med. Tilpas designet til en story eller et banner, hvor lyset falder et andet sted, og hver linje vælges igen.

- Lys tekstfarve: #fbf3ea
- Fersken, lys: #e9a27c
- Rosa, midt: #9c4f6b
- Blommeskygge: #3b1f3f
- Mørk tekstfarve: #1a0f1f

Et eksempel på en Mark-palet med de to tekstfarver i hver ende. De er tonet med Markens egen varme, ikke ren hvid og ren sort.

Idéen bag er det samme kontrastmål, som bruges i webbets tilgængelighedsretningslinjer: sammenlign, hvor lys teksten er, med, hvor lys baggrunden er. Her er princippet i nogle få linjer kode til alle, der bygger noget lignende på nettet.

```js
// Relative luminance of an sRGB colour, as defined in WCAG
function luminance([r, g, b]) {
  const c = [r, g, b].map((v) => {
    v /= 255
    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4
  })
  return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]
}

const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

// Pick whichever ink contrasts more with the colour behind the line
function pickInk(behind, lightInk, darkInk) {
  return contrast(behind, lightInk) >= contrast(behind, darkInk) ? lightInk : darkInk
}

pickInk([156, 79, 107], [251, 243, 234], [26, 15, 31]) // the light ink
```

Kun princippet, ikke koden fra Gradiently. En rigtig baggrund varierer under en linje, så området bagved skal måles, ikke en enkelt pixel.

Hvad tallene angår, kræver WCAG et kontrastforhold på mindst 4,5:1 til brødtekst og 3:1 til stor tekst. [Farvekontrast og tilgængelighed](https://gradiently.design/da/guide/color-contrast-accessibility) forklarer forholdene, og [WebAIM's kontrastkontrol](https://webaim.org/resources/contrastchecker/) lader dig teste ethvert farvepar.

## Automatisk, lys eller mørk: de tre tekstfarvetilstande

| Tilstand | Hvad den gør | Brug den, når |
| --- | --- | --- |
| Automatisk | Vælger den lyse eller mørke farve pr. linje ud fra det, der er bagved | Næsten altid: overskrifter, detaljer og billedtekster på en skiftende baggrund |
| Lys | Bruger altid Markens lyse tekstfarve | En mørk Mark, hvor du vil have, at alle linjer matcher, som på et citatkort |
| Mørk | Bruger altid Markens mørke tekstfarve | En bleg, papiragtig Mark eller tryk, hvor du vil have én ensartet farve |

Tekst starter på Automatisk. At skifte en linje til en fast farve er ét valg i indstillingerne for tekstfarve, og Tilbage til automatisk farve sætter den tilbage.

Du kan stadig farve tekst med en vilkårlig farve fra dit brandkit eller Markens palet. Automatisk tekstfarve er standard, fordi det er det valg, der bliver ved med at virke, når designet flyttes til en anden størrelse.

## Sådan hjælper Marken bagfra

At vælge den rigtige farve er halvdelen af arbejdet. Den anden halvdel er selve baggrunden. En Mark ved, hvor ordene er: dens roligste område med bedst kontrast flytter sig bag teksten, farver nær bogstaverne bliver dybere eller lysere, og travle detaljer slapper af. Hele mekanismen står i [en baggrund, der tilpasser sig tekst](https://gradiently.design/da/guide/text-reacts-to-background). Automatisk tekstfarve vælger så farven til det område, der har lagt sig til ro, så de to forstærker hinanden.

| Reaktion | Hvad der sker bag dine ord |
| --- | --- |
| Fra | Materialet ignorerer dine ord |
| Usynlig | Kun hvor det er nødvendigt; ingen vil bemærke det |
| Diskret | Balanceret: looket bevares, ordene kan læses |
| Tydelig | Ordene vinder altid |
| Markant | Den mest kontrast, det giver, roligt lidt bredere |

De reaktionsniveauer, du kan vælge til et design, fra at materialet ignorerer ord til at give den mest kontrast, det kan.

Ud over forudindstillingerne kan du finjustere med fire skydere: **Tone**, hvor meget materialet lægger sig bagved ord for kontrastens skyld; **Ro**, hvor meget dets vridning og uro dæmpes; **Bøjning**, en let bøjning af mønsteret ved kanten af ordene; og **Rækkevidde**, hvor langt omkring ordene det reagerer. Du vælger selv, hvor kraftigt det virker, så en plakat kan forblive vild, mens en menu forbliver stille.

## Hvad Automatisk tekstfarve bevidst undgår

### Undgå

- En massiv boks bag hver linje
- Slagskygger, der smører bogstavernes kanter ud
- At sløre baggrunden bag teksten
- Ren hvid tekst i et bleg hjørne

### Gør

- Lad hver linje få den farve, der kan læses
- Lad Marken lægge et roligere område bag ordene
- Hold tekstfarverne i Markens egen palet
- Hæv reaktionsniveauet til lille eller lang tekst

Bokse og skygger virker, men de gør opmærksom på sig selv og skjuler baggrunden. [Alternativer til tekstskygger](https://gradiently.design/da/guide/text-shadow-alternatives) forklarer hvorfor, og [tekst på en travl baggrund](https://gradiently.design/da/guide/type-on-busy-backgrounds) har flere måder at holde ord læsbare på uden dem.

## Sådan får du mest ud af Automatisk tekstfarve

1. **Lad teksten stå på Automatisk** Lås kun en linje til lys eller mørk, når du har en bestemt grund, for eksempel for at matche et trykt sæt.
2. **Vælg en reaktion, der passer til opgaven** Diskret passer til de fleste opslag på sociale medier. Vælg Tydelig eller Markant til lille tekst, lange detaljer eller alt, der læses på afstand.
3. **Tjek hver størrelse** Efter en ændring af størrelse bør du se på hvert format. Farven vælges igen for hvert af dem, hvilket som regel er det, du vil have.
4. **Hold overskrifterne korte** En linje, der løber fra den lyseste til den mørkeste del af en Mark, er sværere for enhver farve. Del den i to linjer.

## FAQ

### Hvad er Automatisk tekstfarve i Gradiently?

En indstilling for tekstfarve, der vælger Markens lyse eller mørke farve til hver linje, alt efter hvad der kan læses bedst mod den del af baggrunden, der ligger bagved.

### Kan jeg slå Automatisk tekstfarve fra?

Ja. Sæt en linje til altid at bruge den lyse eller den mørke farve, eller giv den en hvilken som helst farve. Tilbage til automatisk farve sætter den tilbage.

### Lægger Automatisk tekstfarve skygger eller bokse bag teksten?

Nej. Den ændrer kun tekstfarven. Selve Marken lægger et roligere område bag ordene, uden bokse, skygger eller sløring.

### Hvilket kontrastforhold bør tekst have på en baggrund?

WCAG kræver mindst 4,5:1 til brødtekst og 3:1 til stor tekst.

### Hvorfor skiftede min tekst farve, da jeg ændrede designets størrelse?

I en ny størrelse falder lyset et andet sted, så Automatisk tekstfarve vælger farven igen for hver linje for at holde den læsbar.