# Färgkontrast: läsbar text för alla

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

Kontrast är skillnaden mellan ord som folk läser och ord som folk hoppar över. WCAG-siffrorna på klarspråk, hur du kontrollerar dem och vad som händer när bakgrunden är en gradient.

## The short version

- Färgkontrast är skillnaden i ljushet mellan text och dess bakgrund, mätt som ett förhållande från 1:1 (ingen skillnad) till 21:1 (svart på vitt).
- WCAG 2 nivå AA kräver minst 4,5:1 för vanlig text och 3:1 för stor text, vilket är ungefär 24 px normal eller 18,66 px fet.
- Ikoner, kanter på inmatningsfält och andra delar av ett gränssnitt som folk behöver se måste också ha minst 3:1 mot omgivningen.
- På vitt är `#767676` det ljusaste vanliga gråa som klarar 4,5:1 för brödtext, och `#777777` faller precis under.
- På en gradient ändras kontrasten från punkt till punkt, så du måste testa den sämsta punkten bakom orden, inte medelfärgen.

**Färgkontrast** är skillnaden i ljushet mellan text och färgen bakom, och den avgör om folk över huvud taget kan läsa dina ord. Riktlinjerna Web Content Accessibility Guidelines (WCAG) mäter den som ett förhållande från 1:1, där de två färgerna är identiska, till 21:1, svart på vitt. För nivå AA behöver vanlig text minst **4,5:1** och stor text minst **3:1**. Allt annat i den här guiden handlar om att nå de siffrorna utan att göra din design försagd.

Kontrast spelar roll för alla, inte bara för personer med nedsatt syn. Telefoner i solljus, dunkla projektorer, billiga skärmar och trötta ögon krymper alla skillnaden mellan färger. Designer med tillräcklig kontrast blir helt enkelt mer lästa.

## WCAG:s kontrastkvoter på klarspråk

Tre regler i WCAG 2 täcker nästan varje designbeslut. De kommer från [W3C:s framgångskriterier](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), och det är dem som de flesta tillgänglighetsgranskningar och regelverk hänvisar till.

| Vad | Nivå AA | Nivå AAA | Anmärkningar |
| --- | --- | --- | --- |
| Vanlig text | 4,5:1 | 7:1 | Brödtext, bildtexter, etiketter, knappar |
| Stor text | 3:1 | 4,5:1 | Minst 18 pt (ungefär 24 px), eller 14 pt fet (ungefär 18,66 px) |
| Ikoner och delar av gränssnittet | 3:1 | 3:1 | Kanter på inmatningsfält, diagramlinjer som bär mening, ikoner utan etikett |
| Logotyper och dekoration | Ingen | Ingen | Varumärkeslogotyper och rent dekorativ text är undantagna |

Nivå AA är det vanliga målet. AAA är strängare och värt att sikta på vid längre läsning.

Två detaljer överraskar. För det första handlar ”stor” om den renderade storleken, så en rubrik på 24 px på en telefon som skalar ner den kanske inte längre räknas som stor. För det andra är en inaktiverad knapp undantagen, men en ljusgrå platshållare som folk behöver förstå är det inte.

## Så beräknas kontrastkvoten

Kvoten jämför den relativa luminansen hos de två färgerna: hur mycket ljus var och en avger, viktat så som ögat ser. Grönt bidrar mest, rött mindre och blått mycket lite, vilket är varför ett mättat blått kan vara förvånansvärt mörkt och ett gult förvånansvärt ljust. Formeln är `(L1 + 0.05) / (L2 + 0.05)`, där L1 är den ljusare färgen.

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

Hela beräkningen ryms på ett dussin rader. Användbart för att kontrollera en varumärkespalett i bulk.

Du behöver inte räkna för hand. [WebAIM:s kontrastkontroll](https://webaim.org/resources/contrastchecker/) tar två hexkoder och talar om vilka nivåer som klaras, och färgväljaren i Chromes utvecklarverktyg visar kvoten för all text du inspekterar.

## Färgpar som klarar och inte klarar kraven

Varumärkesfärger hamnar ofta i det besvärliga mellanläget, för mörka för mörk text och för ljusa för vit text. Mellangröna, orange, rosa och ljusblå färger är de vanliga bovarna. Här är vanliga kombinationer med sina verkliga kvoter.

| Text på bakgrund | Kvot | Vanlig text | Stor text |
| --- | --- | --- | --- |
| Vitt på `#7c3aed` violett | 5,7:1 | Klarar | Klarar |
| Vitt på `#8b5cf6` ljusviolett | 4,2:1 | Klarar inte | Klarar |
| Vitt på `#2563eb` blått | 5,2:1 | Klarar | Klarar |
| Vitt på `#3b82f6` himmelsblått | 3,7:1 | Klarar inte | Klarar |
| Vitt på `#10b981` grönt | 2,5:1 | Klarar inte | Klarar inte |
| `#0b0b10` nästan svart på `#10b981` grönt | 7,7:1 | Klarar | Klarar |
| Vitt på `#f59e0b` bärnsten | 2,2:1 | Klarar inte | Klarar inte |
| `#999999` grått på vitt | 2,9:1 | Klarar inte | Klarar inte |
| `#6b7280` grått på vitt | 4,8:1 | Klarar | Klarar |

En liten förskjutning kan avgöra: två blå nyanser som ser nästan likadana ut hamnar på var sin sida om 4,5:1.

> **Byt texten, inte varumärket** När vitt inte klarar en ljus varumärkesfärg, prova nästan svart text i stället. Grönt, bärnsten och korall klarar oftast kraven med råge med mörk text, och färgen förblir exakt som den är. [Att välja varumärkesfärger](https://gradiently.design/sv/guide/how-to-choose-brand-colors) går igenom hur du bygger in det i en palett från början.

## Därför gör gradienter kontrasten svårare

En enfärgad bakgrund har en kontrastkvot. En gradient har en ny i varje punkt. Vit text som lätt klarar kraven över den mörka änden av en blandning kan helt misslyckas i den ljusa änden, och en rubrik som sträcker sig över gradienten klarar och misslyckas på samma rad.

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

Vit text får 18:1 till vänster, 5,7:1 över violetten och 2,7:1 i den rosa änden. En gradient, tre utslag.

Regeln är enkel: testa den ljusaste punkten bakom ljus text, eller den mörkaste punkten bakom mörk text. Om den sämsta punkten klarar det gör hela raden det. Medelfärger och pipettprov från mitten leder dig vilse.

## Så rättar du kontrasten på en gradient

1. **Flytta orden till den lugna änden** Lägg texten över den mörkaste eller ljusaste delen av gradienten och låt den ljusa övergången ske långt ifrån.
2. **Smalna av spannet bakom texten** Håll den del av gradienten som ligger bakom orden inom ett litet ljushetsspann. Resten av ytan kan vara så djärv du vill.
3. **Lägg till en mjuk skugga** En mild mörk eller ljus tonad bakgrund bakom texten, som en gradient från genomskinligt till 30 % svart, höjer kontrasten utan en synlig ruta.
4. **Gör den större och fetare** Stor text behöver bara 3:1. En kraftigare vikt och en större storlek kan göra en rad som inte klarar kraven till en som gör det.
5. **Testa på en riktig telefon** Kontrollera designen på full ljusstyrka och på låg, utomhus om du kan. Kvoter är golvet, inte 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;
}
```

Skuggan mörknar bara där gradienten blir ljus, så vänstra sidan förblir orörd.

Ett stående inlägg där rubriken Dörrarna öppnas klockan sju korsar ett ljust område i gradienten och blir svår att läsa

Orden löper rakt över den ljusaste delen av ytan och kontrasten sjunker.

Samma stående inlägg med ett mörkare, lugnare område av gradienten bakom rubriken så att den syns tydligt

Samma design med det lugna, mörka området flyttat bakom orden.

Det här är tanken bakom Gradiently och läsbarheten: en Mark vet var dina ord finns, flyttar sitt lugnaste område med bäst kontrast bakom dem och väljer ljust eller mörkt bläck per rad ur sin egen palett. För fler tekniker som fungerar var som helst, läs [text på en gradient](https://gradiently.design/sv/guide/text-on-gradient) och [läsbar text över foton](https://gradiently.design/sv/guide/text-over-image). För mörka gränssnitt särskilt, se [att designa för mörkt läge](https://gradiently.design/sv/guide/dark-mode-design).

## FAQ

### Vad är en bra kontrastkvot för färg?

Minst 4,5:1 för vanlig text och 3:1 för stor text uppfyller WCAG nivå AA. För längre läsning är 7:1 (nivå AAA) bekvämare.

### Vad räknas som stor text i WCAG?

Text på minst 18 punkter, ungefär 24 px, eller minst 14 punkter fet, ungefär 18,66 px. Stor text behöver bara 3:1 på nivå AA.

### Vad är det ljusaste gråa jag kan använda på vitt?

`#767676` är det ljusaste vanliga gråa som når 4,5:1 på vitt. `#777777` mäter 4,48:1 och klarar inte kraven för brödtext.

### Måste logotyper uppfylla kontrastkrav?

Nej. WCAG undantar text som ingår i en logotyp eller ett varumärkesnamn, och rent dekorativ text. Allt som folk behöver läsa eller använda räknas fortfarande.

### Hur kontrollerar jag kontrasten på en gradientbakgrund?

Mät textfärgen mot den ljusaste punkten bakom ljus text, eller den mörkaste punkten bakom mörk text. Om den sämsta punkten klarar det gör hela raden det.