# Farvekontrast: læsbar tekst for alle

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

Kontrast er forskellen på ord, der bliver læst, og ord, der bliver sprunget over. WCAG-tallene på almindeligt dansk, hvordan du tjekker dem, og hvad der ændrer sig, når baggrunden er en gradient.

## The short version

- Farvekontrast er forskellen i lysstyrke mellem tekst og baggrund, målt som et forhold fra 1:1 (ingen forskel) til 21:1 (sort på hvid).
- WCAG 2 niveau AA kræver mindst 4,5:1 til normal tekst og 3:1 til stor tekst, som er omkring 24 px i normal vægt eller 18,66 px i fed.
- Ikoner, feltkanter og andre dele af en brugerflade, som folk skal kunne se, kræver også mindst 3:1 mod det, der omgiver dem.
- På hvid er `#767676` den lyseste almindelige grå, der består 4,5:1 til brødtekst, og `#777777` dumper lige akkurat.
- På en gradient skifter kontrasten fra punkt til punkt, så du skal teste det værste sted bag ordene og ikke gennemsnitsfarven.

**Farvekontrast** er forskellen i lysstyrke mellem tekst og farven bag den, og den afgør, om folk overhovedet kan læse dine ord. Web Content Accessibility Guidelines (WCAG) måler den som et forhold fra 1:1, hvor de to farver er ens, til 21:1, sort på hvid. På niveau AA kræver normal tekst mindst **4,5:1** og stor tekst mindst **3:1**. Resten af denne guide handler om at ramme de tal uden at gøre dit design forsagt.

Kontrast betyder noget for alle, ikke kun for mennesker med nedsat syn. Telefoner i solskin, mørke projektorer, billige skærme og trætte øjne mindsker alle forskellen mellem farver. Design med nok kontrast bliver simpelthen læst oftere.

## WCAG-kontrastforhold på almindeligt dansk

Tre regler i WCAG 2 dækker næsten alle designbeslutninger. De kommer fra [W3C’s succeskriterier](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), og det er dem, de fleste tilgængelighedsrevisioner og regler henviser til.

| Hvad | Niveau AA | Niveau AAA | Noter |
| --- | --- | --- | --- |
| Normal tekst | 4.5:1 | 7:1 | Brødtekst, billedtekster, labels, knapper |
| Stor tekst | 3:1 | 4.5:1 | Mindst 18 pt (omkring 24 px) eller 14 pt fed (omkring 18,66 px) |
| Ikoner og dele af brugerfladen | 3:1 | 3:1 | Feltkanter, diagramlinjer med betydning, ikoner uden label |
| Logoer og pynt | Ingen | Ingen | Brandlogotyper og rent dekorativ tekst er undtaget |

Niveau AA er det almindelige mål. AAA er strengere og værd at sigte efter ved lang læsning.

To detaljer fanger folk. For det første handler “stor” om den gengivne størrelse, så en overskrift på 24 px på en telefon, der skalerer den ned, holder måske op med at tælle som stor. For det andet er en deaktiveret knap undtaget, men en lysegrå pladsholder, som folk skal forstå, er det ikke.

## Sådan beregnes kontrastforholdet

Forholdet sammenligner de to farvers relative luminans: hvor meget lys hver af dem afgiver, vægtet efter, hvordan øjet ser. Grøn bidrager mest, rød mindre og blå meget lidt, og derfor kan en mættet blå være overraskende mørk og en gul overraskende lys. Formlen er `(L1 + 0.05) / (L2 + 0.05)`, hvor L1 er den lyseste farve.

```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 beregningen fylder et dusin linjer. Nyttigt, når du vil tjekke en brandpalet i bulk.

Du behøver ikke regne det ud i hånden. [WebAIM’s kontrastværktøj](https://webaim.org/resources/contrastchecker/) tager to hexkoder og fortæller, hvilke niveauer der består, og farvevælgeren i Chromes udviklerværktøjer viser forholdet for enhver tekst, du inspicerer.

## Farvepar, der består og dumper

Brandfarver ligger ofte i det akavede midterområde, for mørke til mørk tekst og for lyse til hvid tekst. Mellemgrønne, orange, lyserøde og lyseblå nuancer er de sædvanlige syndere. Her er almindelige kombinationer med deres rigtige forhold.

| Tekst på baggrund | Forhold | Normal tekst | Stor tekst |
| --- | --- | --- | --- |
| Hvid på `#7c3aed` violet | 5.7:1 | Består | Består |
| Hvid på `#8b5cf6` lys violet | 4.2:1 | Dumper | Består |
| Hvid på `#2563eb` blå | 5.2:1 | Består | Består |
| Hvid på `#3b82f6` himmelblå | 3.7:1 | Dumper | Består |
| Hvid på `#10b981` grøn | 2.5:1 | Dumper | Dumper |
| `#0b0b10` næsten sort på `#10b981` grøn | 7.7:1 | Består | Består |
| Hvid på `#f59e0b` rav | 2.2:1 | Dumper | Dumper |
| `#999999` grå på hvid | 2.9:1 | Dumper | Dumper |
| `#6b7280` grå på hvid | 4.8:1 | Består | Består |

Et lille skift kan afgøre det: to blå nuancer, der ser næsten ens ud, havner på hver sin side af 4,5:1.

> **Vend teksten, ikke brandet** Når hvid dumper på en skarp brandfarve, så prøv næsten sort tekst i stedet. Grøn, rav og koral består som regel let med mørk skrift, og farven forbliver præcis, som den er. [Valg af brandfarver](https://gradiently.design/da/guide/how-to-choose-brand-colors) viser, hvordan du bygger det ind i en palet fra starten.

## Hvorfor gradienter gør kontrast sværere

En flad baggrund har ét kontrastforhold. En gradient har et forskelligt i hvert punkt. Hvid tekst, der let består over den mørke ende af en blanding, kan dumpe fuldstændigt i den lyse ende, og en overskrift, der strækker sig hen over gradienten, består og dumper i den samme linje.

Midnat til violet til pink: `linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%)`

Hvid tekst scorer 18:1 til venstre, 5,7:1 over violetten og 2,7:1 i den lyserøde ende. Én gradient, tre domme.

Reglen er enkel: test det lyseste punkt bag lys tekst eller det mørkeste bag mørk tekst. Består det værste punkt, består hele linjen. Gennemsnitsfarver og pipetteprøver fra midten vil vildlede dig.

## Sådan retter du kontrasten på en gradient

1. **Flyt ordene til den rolige ende** Placér tekst over den mørkeste eller lyseste del af gradienten, og lad den skarpe overgang ske væk fra den.
2. **Indsnævr spændet bag teksten** Hold den del af gradienten, der ligger bag ordene, inden for et lille lysstyrkespænd. Resten af fladen kan være så dristig, du vil.
3. **Tilføj en blød skygge bag** En svag mørk eller lys tone bag teksten, som en gradient fra gennemsigtig til 30 % sort, hæver kontrasten uden en synlig boks.
4. **Gå større og federe** Stor tekst kræver kun 3:1. Et federe skriftsnit og en større størrelse kan gøre en linje, der dumper, til en, der består.
5. **Test på en rigtig telefon** Tjek designet ved fuld lysstyrke og ved lav lysstyrke, gerne udendørs. Forholdene 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;
}
```

Skyggen mørkner kun, hvor gradienten bliver lys, så venstre side forbliver urørt.

Et opslag i højformat, hvor overskriften Dørene åbner klokken syv krydser et lyst område af gradienten og bliver svær at læse

Ordene løber lige hen over den lyseste del af feltet, og deres kontrast falder.

Det samme opslag i højformat med et mørkere, roligere område af gradienten bag overskriften, så den er tydelig at læse

Det samme design med det rolige, mørke område flyttet bag ordene.

Det er tanken bag læsbarheden i Gradiently: et Mark ved, hvor dine ord er, flytter sit roligste område med den bedste kontrast bag dem og vælger lys eller mørk skrift for hver linje ud fra sin egen palet. Flere teknikker, der virker overalt, finder du i [tekst på en gradient](https://gradiently.design/da/guide/text-on-gradient) og [læsbar tekst på fotos](https://gradiently.design/da/guide/text-over-image). Til mørke brugerflader specifikt, se [design til mørk tilstand](https://gradiently.design/da/guide/dark-mode-design).

## FAQ

### Hvad er et godt farvekontrastforhold?

Mindst 4,5:1 til normal tekst og 3:1 til stor tekst opfylder WCAG niveau AA. Til lang læsning er 7:1 (niveau AAA) mere behageligt.

### Hvad tæller som stor tekst i WCAG?

Tekst på mindst 18 point, omkring 24 px, eller mindst 14 point fed, omkring 18,66 px. Stor tekst kræver kun 3:1 på niveau AA.

### Hvad er den lyseste grå, jeg kan bruge på hvid?

`#767676` er den lyseste almindelige grå, der når 4,5:1 på hvid. `#777777` måler 4,48:1 og dumper til brødtekst.

### Skal logoer opfylde kontrastkrav?

Nej. WCAG undtager tekst, der er en del af et logo eller brandnavn, og rent dekorativ tekst. Alt, folk skal læse eller bruge, tæller stadig med.

### Hvordan tjekker jeg kontrast på en gradientbaggrund?

Mål tekstfarven mod det lyseste punkt bag lys tekst eller det mørkeste punkt bag mørk tekst. Består det værste punkt, består hele linjen.