# Fargekontrast: tekst som alle kan lese

[Canonical HTML page](https://gradiently.design/nb/guide/color-contrast-accessibility)

Kontrast er forskjellen på ord folk leser og ord folk hopper over. WCAG-tallene på klarspråk, hvordan du sjekker dem, og hva som endres når bakgrunnen er en gradient.

## The short version

- Fargekontrast er forskjellen i lyshet mellom tekst og bakgrunn, målt som et forhold fra 1:1 (ingen forskjell) til 21:1 (svart på hvitt).
- WCAG 2 nivå AA krever minst 4,5:1 for vanlig tekst og 3:1 for stor tekst, som er omtrent 24 px vanlig eller 18,66 px fet.
- Ikoner, feltkanter og andre deler av et grensesnitt folk må se, trenger også minst 3:1 mot omgivelsene.
- På hvitt er `#767676` den lyseste vanlige grå som klarer 4,5:1 for brødtekst, og `#777777` feiler så vidt.
- På en gradient endrer kontrasten seg fra punkt til punkt, så du må teste det verste stedet bak ordene, ikke gjennomsnittsfargen.

**Fargekontrast** er forskjellen i lyshet mellom tekst og fargen bak den, og den avgjør om folk i det hele tatt kan lese ordene dine. Retningslinjene for tilgjengelig webinnhold (WCAG) måler den som et forhold fra 1:1, der de to fargene er like, til 21:1, svart på hvitt. På nivå AA trenger vanlig tekst minst **4,5:1** og stor tekst minst **3:1**. Alt annet i denne guiden handler om å nå disse tallene uten å gjøre designet ditt forsagt.

Kontrast betyr noe for alle, ikke bare for folk med nedsatt syn. Mobiler i sollys, svake prosjektorer, billige skjermer og slitne øyne krymper alle forskjellen mellom farger. Design med nok kontrast blir rett og slett lest mer.

## WCAGs kontrastforhold i klartekst

Tre regler i WCAG 2 dekker nesten alle designbeslutninger. De kommer fra [W3Cs suksesskriterier](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), og de er det de fleste tilgjengelighetsrevisjoner og forskrifter viser til.

| Hva | Nivå AA | Nivå AAA | Merknader |
| --- | --- | --- | --- |
| Vanlig tekst | 4,5:1 | 7:1 | Brødtekst, bildetekster, etiketter, knapper |
| Stor tekst | 3:1 | 4,5:1 | Minst 18 pt (omtrent 24 px), eller 14 pt fet (omtrent 18,66 px) |
| Ikoner og deler av grensesnittet | 3:1 | 3:1 | Feltkanter, kurver som bærer mening, ikoner uten etikett |
| Logoer og dekor | Ingen | Ingen | Logotyper og rent dekorativ tekst er unntatt |

Nivå AA er det vanlige målet. AAA er strengere og verdt å sikte mot i lange tekster.

To detaljer tar folk på senga. For det første handler «stor» om størrelsen slik den gjengis, så en overskrift på 24 px på en mobil som skalerer den ned, teller kanskje ikke lenger som stor. For det andre er en deaktivert knapp unntatt, men en lysegrå plassholder folk må forstå, er det ikke.

## Slik regnes kontrastforholdet ut

Forholdet sammenligner den relative luminansen til de to fargene: hvor mye lys hver av dem gir fra seg, vektet slik øyet ser. Grønt bidrar mest, rødt mindre og blått svært lite, og derfor kan et mettet blått være overraskende mørkt og et gult overraskende lyst. Formelen er `(L1 + 0.05) / (L2 + 0.05)`, der L1 er den lyseste fargen.

```js
// WCAG 2 contrast ratio between two hex colours
const channel = (c) => {
  c /= 255
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
}
const luminance = (hex) => {
  const [r, g, b] = [1, 3, 5].map((i) => channel(parseInt(hex.slice(i, i + 2), 16)))
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}
const contrast = (a, b) => {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x)
  return (hi + 0.05) / (lo + 0.05)
}

contrast('#767676', '#ffffff') // 4.54, passes for body text
contrast('#777777', '#ffffff') // 4.48, fails
```

Hele utregningen får plass på et dusin linjer. Nyttig for å sjekke en merkevarepalett i bulk.

Du trenger ikke regne den ut for hånd. [WebAIMs kontrastsjekker](https://webaim.org/resources/contrastchecker/) tar to hex-koder og forteller hvilke nivåer som består, og fargevelgeren i utviklerverktøyene i Chrome viser forholdet for all tekst du inspiserer.

## Fargepar som består og feiler

Merkevarefarger havner ofte i det kinkige midtpartiet, for mørke til mørk tekst og for lyse til hvit tekst. Middels grønne, oransje, rosa og lyseblå farger er de vanlige syndebukkene. Dette er vanlige kombinasjoner, med de faktiske forholdene.

| Tekst på bakgrunn | Forhold | Vanlig tekst | Stor tekst |
| --- | --- | --- | --- |
| Hvit på `#7c3aed` fiolett | 5,7:1 | Består | Består |
| Hvit på `#8b5cf6` lys fiolett | 4,2:1 | Feiler | Består |
| Hvit på `#2563eb` blå | 5,2:1 | Består | Består |
| Hvit på `#3b82f6` himmelblå | 3,7:1 | Feiler | Består |
| Hvit på `#10b981` grønn | 2,5:1 | Feiler | Feiler |
| `#0b0b10` nesten svart på `#10b981` grønn | 7,7:1 | Består | Består |
| Hvit på `#f59e0b` rav | 2,2:1 | Feiler | Feiler |
| `#999999` grå på hvitt | 2,9:1 | Feiler | Feiler |
| `#6b7280` grå på hvitt | 4,8:1 | Består | Består |

En liten forskyvning kan avgjøre det: to blåtoner som ser nesten like ut, havner på hver sin side av 4,5:1.

> **Snu teksten, ikke merkevaren** Når hvitt feiler på en sterk merkevarefarge, prøv nesten svart tekst i stedet. Grønt, rav og korall klarer seg som regel greit med mørk skrift, og fargen forblir akkurat som den er. [Å velge merkevarefarger](https://gradiently.design/nb/guide/how-to-choose-brand-colors) tar for seg hvordan du bygger dette inn i en palett fra starten.

## Hvorfor gradienter gjør kontrast vanskeligere

En flat bakgrunn har ett kontrastforhold. En gradient har et ulikt ett i hvert punkt. Hvit tekst som lett består over den mørke enden av en blanding, kan feile helt i den lyse enden, og en overskrift som strekker seg over gradienten, både består og feiler på samme linje.

Midnatt til fiolett til rosa: `linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%)`

Hvit tekst får 18:1 til venstre, 5,7:1 over det fiolette og 2,7:1 i den rosa enden. Én gradient, tre dommer.

Regelen er enkel: test det lyseste punktet bak lys tekst, eller det mørkeste punktet bak mørk tekst. Hvis det verste punktet består, består hele linjen. Gjennomsnittsfarger og pipetteprøver fra midten vil lure deg.

## Slik retter du kontrasten på en gradient

1. **Flytt ordene til den rolige enden** Plasser tekst over den mørkeste eller lyseste delen av gradienten, og la den lyse overgangen skje et annet sted.
2. **Snevre inn spennet bak teksten** Hold den delen av gradienten som ligger bak ord, innenfor et lite lyshetsområde. Resten av lerretet kan være så dristig du vil.
3. **Legg til et mykt slør** En mild mørk eller lys tone bak teksten, som en gradient fra gjennomsiktig til 30 % svart, løfter kontrasten uten en synlig boks.
4. **Gå større og tyngre** Stor tekst trenger bare 3:1. Et tyngre snitt og en større størrelse kan gjøre en linje som feiler, til en som består.
5. **Test på en ekte mobil** Sjekk designet på full lysstyrke og på lav, utendørs om du kan. Forholdstall er gulvet, ikke målet.

```css
.card {
  background: linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%);
  color: #ffffff;
}
/* A soft scrim keeps white text above 4.5:1 across the pink end */
.card .text {
  background: linear-gradient(90deg, transparent 0%, rgb(31 11 58 / 0.55) 60%);
  padding: 1rem 1.25rem;
}
```

Sløret mørkner bare der gradienten blir lys, så venstre side forblir urørt.

Et stående innlegg der overskriften Dørene åpner klokka sju krysser et lyst område av gradienten og blir vanskelig å lese

Ordene går rett over den lyseste delen av flaten, og kontrasten faller.

Det samme stående innlegget med et mørkere, roligere område av gradienten bak overskriften, så den leses tydelig

Det samme designet med den rolige, mørke regionen flyttet bak ordene.

Dette er tanken bak lesbarheten i Gradiently: en Mark vet hvor ordene dine er, flytter sin roligste region med best kontrast bak dem og velger lyst eller mørkt blekk per linje fra sin egen palett. For flere teknikker som fungerer overalt, les [tekst på gradient](https://gradiently.design/nb/guide/text-on-gradient) og [lesbar tekst over foto](https://gradiently.design/nb/guide/text-over-image). For mørke grensesnitt spesielt, se [design for mørk modus](https://gradiently.design/nb/guide/dark-mode-design).

## FAQ

### Hva er et godt kontrastforhold?

Minst 4,5:1 for vanlig tekst og 3:1 for stor tekst oppfyller WCAG nivå AA. For lange tekster er 7:1 (nivå AAA) behageligere.

### Hva regnes som stor tekst i WCAG?

Tekst på minst 18 punkt, omtrent 24 px, eller minst 14 punkt fet, omtrent 18,66 px. Stor tekst trenger bare 3:1 på nivå AA.

### Hva er den lyseste grå jeg kan bruke på hvitt?

`#767676` er den lyseste vanlige grå som når 4,5:1 på hvitt. `#777777` måler 4,48:1 og feiler for brødtekst.

### Må logoer oppfylle kontrastkravene?

Nei. WCAG unntar tekst som er en del av en logo eller et merkenavn, og rent dekorativ tekst. Alt folk må lese eller bruke, teller fortsatt.

### Hvordan sjekker jeg kontrast på en gradientbakgrunn?

Mål tekstfargen mot det lyseste punktet bak lys tekst, eller det mørkeste punktet bak mørk tekst. Hvis det verste punktet består, består hele linjen.