# Auto-tekstfarge: slik velger Gradiently lys eller mørk tekst per linje

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

En gradient er lys ett sted og mørk et annet, så ingen enkelt tekstfarge passer overalt. Auto-tekstfarge bestemmer linje for linje, og Marken hjelper til bakfra.

## The short version

- Auto-tekstfarge er en innstilling i Gradiently som velger lys eller mørk tekst for hver tekstlinje, alt etter hva som er lettest å lese mot den delen av Marken som ligger rett bak.
- Begge tekstfargene kommer fra Markens egen palett, så teksten hører alltid til bakgrunnen i stedet for å falle tilbake på ren hvit eller svart.
- Tekst kan også låses til lys eller mørk tekstfarge når du vil ha én farge uansett bakgrunn.
- Auto-tekstfarge virker sammen med Markens reaksjon, som roer materialet bak ordene, fra Av via Usynlig, Diskré og Tydelig til Kraftig.
- Ingen av dem bruker bokser, skygger eller uskarphet, og du velger hvor sterkt Marken reagerer.

**Auto-tekstfarge** er måten Gradiently velger fargen på teksten din. For hver tekstlinje som står på Auto, ser den på den delen av Marken som ligger rett bak og velger lys eller mørk tekstfarge, alt etter hva som leses best der. Begge fargene kommer fra Markens egen palett, så en overskrift over et blekt hjørne blir dyp mens en bildetekst over et mørkt felt blir lys, og begge ser likevel ut som samme merkevare.

## Hvorfor én tekstfarge svikter på en gradient

På en flat bakgrunn velger du tekstfarge én gang. En gradient endrer seg underveis: toppen av en story kan være nesten hvit og bunnen nesten svart. Hvit tekst som leses nydelig nederst forsvinner øverst, og en lang overskrift kan krysse begge deler. Det er kjerneproblemet med [tekst på gradientbakgrunn](https://gradiently.design/nb/guide/text-on-gradient), og de vanlige løsningene, bokser bak ordene og skygger, dekker til nettopp den bakgrunnen du valgte.

En stående story som kunngjør et atelier-salg, der tekstfargen sliter mot lysere og mørkere partier av gradienten

Én fast farge over en bakgrunn som skifter: deler av teksten kjemper mot materialet.

Den samme storyen om atelier-salget med hver linje i den lyse eller mørke tekstfargen som leses best, og roligere materiale bak ordene

Auto-tekstfarge med reagerende Mark: hver linje får fargen som kan leses, og materialet roer seg bak den.

## Slik velger Auto-tekstfarge lys eller mørk

Hver Mark har en lys og en mørk tekstfarge hentet fra paletten: en blek tone og en dyp tone som hører til fargene. Når en linje står på Auto, måler Gradiently materialet i området linjen dekker og gir den den fargen som skiller seg mest ut. Flytt teksten, så følger valget etter. Endre størrelsen på designet til en story eller et banner, der lyset lander et annet sted, så velges hver linje på nytt.

- Lys tekstfarge: #fbf3ea
- Lys fersken: #e9a27c
- Rosa midttone: #9c4f6b
- Plommeskygge: #3b1f3f
- Mørk tekstfarge: #1a0f1f

Et eksempel på en Mark-palett med de to tekstfargene i hver ende. Tekstfargene har Markens egen varme, ikke ren hvit og ren svart.

Ideen bak er det samme kontrastmålet som brukes i nettets retningslinjer for tilgjengelighet: sammenlign hvor lys teksten er med hvor lys bakgrunnen er. Her er prinsippet i noen få kodelinjer, for den som bygger noe lignende på nett.

```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
```

Bare prinsippet, ikke koden til Gradiently. En ekte bakgrunn varierer under en linje, så hele området bak må måles, ikke én enkelt piksel.

Når det gjelder tallene, krever WCAG et kontrastforhold på minst 4,5:1 for brødtekst og 3:1 for stor tekst. [Fargekontrast og tilgjengelighet](https://gradiently.design/nb/guide/color-contrast-accessibility) forklarer forholdstallene, og [WebAIMs kontrastsjekker](https://webaim.org/resources/contrastchecker/) lar deg teste hvilket som helst fargepar.

## Auto, Lys eller Mørk: de tre fargemodusene

| Modus | Hva den gjør | Bruk den når |
| --- | --- | --- |
| Auto | Velger lys eller mørk tekstfarge per linje ut fra det som ligger bak | Nesten alltid: overskrifter, detaljer og bildetekster på en bakgrunn som skifter |
| Lys | Bruker alltid Markens lyse tekstfarge | En mørk Mark der du vil at hver linje skal være lik, som et sitatkort |
| Mørk | Bruker alltid Markens mørke tekstfarge | En blek, papiraktig Mark, eller trykk der du vil ha én konsekvent farge |

Tekst starter på Auto. Å låse en linje til en fast farge er ett valg i innstillingene for tekstfarge, og Tilbake til Auto-tekstfarge setter den tilbake.

Du kan fortsatt gi teksten hvilken som helst farge fra merkevaresettet ditt eller Markens palett. Auto-tekstfarge er standard fordi det er valget som fortsetter å fungere når designet flyttes til en annen størrelse.

## Slik hjelper Marken til bakfra

Å velge riktig tekstfarge er halve jobben. Den andre halvparten er selve bakgrunnen. En Mark vet hvor ordene står: det roligste området med best kontrast flytter seg bak teksten, farger nær bokstavene blir dypere eller lysere, og travle detaljer roer seg. Hele mekanismen finner du i [en bakgrunn som tilpasser seg teksten](https://gradiently.design/nb/guide/text-reacts-to-background). Auto-tekstfarge velger så fargen for det roligere området, slik at de to forsterker hverandre.

| Reaksjon | Hva som skjer bak ordene dine |
| --- | --- |
| Av | Materialet tar ikke hensyn til ordene dine |
| Usynlig | Bare der det trengs; ingen vil merke det |
| Diskré | Balansert: uttrykket bevares, ordene kan leses |
| Tydelig | Ordene kommer alltid først |
| Kraftig | Maksimal kontrast og et litt større rolig område |

Reaksjonsnivåene du kan velge for et design, fra et materiale som overser ordene til et som gir så mye kontrast det kan.

Utover forhåndsvalgene lar fire hjul deg finjustere: **Tone**, hvor mye materialet dempes bak ordene for å gi kontrast; **Ro**, hvor mye forvrengningen og uroen slapper av; **Bøy**, en svak bøyning av mønsteret langs kanten av ordene; og **Rekkevidde**, hvor langt rundt ordene det reagerer. Du bestemmer hvor sterkt det virker, så en plakat kan forbli vill mens en meny forblir rolig.

## Hva Auto-tekstfarge bevisst unngår

### Unngå

- En heldekkende boks bak hver linje
- Skygger som gjør bokstavkantene uklare
- Uskarphet i bakgrunnen bak teksten
- Ren hvit tekst på et blekt hjørne

### Gjør

- La hver linje få tekstfargen som kan leses
- La Marken roe et område bak ordene
- Hold tekstfargene i Markens egen palett
- Øk reaksjonsnivået for liten eller lang tekst

Bokser og skygger fungerer, men de roper om oppmerksomhet og skjuler bakgrunnen. [Alternativer til tekstskygger](https://gradiently.design/nb/guide/text-shadow-alternatives) forklarer hvorfor, og [tekst på en travel bakgrunn](https://gradiently.design/nb/guide/type-on-busy-backgrounds) har flere måter å holde ordene lesbare uten dem.

## Få mest mulig ut av Auto-tekstfarge

1. **La teksten stå på Auto** Lås bare en linje til lys eller mørk når du har en konkret grunn, for eksempel å matche et trykt sett.
2. **Velg en reaksjon som passer jobben** Diskré passer de fleste innlegg i sosiale medier. Velg Tydelig eller Kraftig for liten skrift, lange detaljer eller alt som leses på avstand.
3. **Sjekk hver størrelse** Se på hvert format etter at du har endret størrelse. Tekstfargen velges på nytt for hvert av dem, og det er som regel det du vil.
4. **Hold overskriftene korte** En linje som går fra den lyseste til den mørkeste delen av en Mark er vanskeligere for enhver tekstfarge. Del den i to linjer.

## FAQ

### Hva er Auto-tekstfarge i Gradiently?

En innstilling for tekstfarge som velger Markens lyse eller mørke tekstfarge for hver linje, alt etter hva som leses best mot den delen av bakgrunnen som ligger bak.

### Kan jeg slå av Auto-tekstfarge?

Ja. Sett en linje til alltid å bruke lys eller mørk tekstfarge, eller gi den hvilken som helst farge du vil. Tilbake til Auto-tekstfarge setter den tilbake.

### Legger Auto-tekstfarge til skygger eller bokser bak teksten?

Nei. Den endrer bare tekstfargen. Marken selv roer et område bak ordene, uten bokser, skygger eller uskarphet.

### Hvilket kontrastforhold bør tekst ha mot en bakgrunn?

WCAG krever minst 4,5:1 for brødtekst og 3:1 for stor tekst.

### Hvorfor endret teksten farge etter at jeg endret størrelse på designet?

I en ny størrelse faller lyset et annet sted, så Auto-tekstfarge velger fargen på nytt for hver linje for å holde den lesbar.