# Kleurcontrast: leesbare tekst voor iedereen

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

Contrast is het verschil tussen woorden die mensen lezen en woorden die ze overslaan. De WCAG-getallen in gewone taal, hoe je ze controleert en wat verandert als de achtergrond een kleurverloop is.

## The short version

- Kleurcontrast is het helderheidsverschil tussen tekst en achtergrond, gemeten als verhouding van 1:1 (geen verschil) tot 21:1 (zwart op wit).
- WCAG 2 niveau AA vraagt minstens 4,5:1 voor gewone tekst en 3:1 voor grote tekst, wat ongeveer 24 px normaal of 18,66 px vet is.
- Iconen, invoerranden en andere delen van een interface die mensen moeten kunnen zien hebben ook minstens 3:1 nodig tegen hun omgeving.
- Op wit is `#767676` het lichtste gewone grijs dat 4,5:1 haalt voor lopende tekst, en `#777777` haalt het net niet.
- Op een kleurverloop verandert contrast van punt tot punt, dus je moet de slechtste plek achter de woorden testen, niet de gemiddelde kleur.

**Kleurcontrast** is het helderheidsverschil tussen tekst en de kleur erachter, en het bepaalt of mensen je woorden überhaupt kunnen lezen. De Web Content Accessibility Guidelines (WCAG) meten het als verhouding van 1:1, waar beide kleuren gelijk zijn, tot 21:1, zwart op wit. Voor niveau AA heeft gewone tekst minstens **4,5:1** nodig en grote tekst minstens **3:1**. Al het andere in deze gids gaat over die getallen halen zonder je ontwerp bedeesd te maken.

Contrast doet ertoe voor iedereen, niet alleen voor mensen met een slecht gezichtsvermogen. Telefoons in zonlicht, doffe projectoren, goedkope monitoren en vermoeide ogen verkleinen allemaal het verschil tussen kleuren. Ontwerpen met genoeg contrast worden gewoon vaker gelezen.

## De WCAG-contrastverhoudingen in gewone taal

Drie regels in WCAG 2 dekken bijna elke ontwerpbeslissing. Ze komen uit de [succescriteria van het W3C](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) en zijn waar de meeste toegankelijkheidsaudits en regelgeving naar verwijzen.

| Wat | Niveau AA | Niveau AAA | Opmerkingen |
| --- | --- | --- | --- |
| Gewone tekst | 4,5:1 | 7:1 | Lopende tekst, bijschriften, labels, knoppen |
| Grote tekst | 3:1 | 4,5:1 | Minstens 18 pt (ongeveer 24 px), of 14 pt vet (ongeveer 18,66 px) |
| Iconen en interface-onderdelen | 3:1 | 3:1 | Invoerranden, grafieklijnen die betekenis dragen, iconen zonder label |
| Logo’s en decoratie | Geen | Geen | Merklogotypes en puur decoratieve tekst zijn uitgezonderd |

Niveau AA is het gebruikelijke doel. AAA is strenger en de moeite waard bij lang leeswerk.

Twee details laten mensen struikelen. Ten eerste gaat “groot” over de weergegeven grootte, dus een kop van 24 px op een telefoon die hem verkleint telt misschien niet meer als groot. Ten tweede is een uitgeschakelde knop uitgezonderd, maar een lichtgrijze placeholder die mensen moeten begrijpen niet.

## Hoe de contrastverhouding wordt berekend

De verhouding vergelijkt de relatieve luminantie van de twee kleuren: hoeveel licht elk afgeeft, gewogen zoals het oog ziet. Groen draagt het meest bij, rood minder en blauw heel weinig, en daarom kan een verzadigd blauw verrassend donker zijn en een geel verrassend licht. De formule is `(L1 + 0.05) / (L2 + 0.05)`, waarbij L1 de lichtere kleur is.

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

De hele berekening past in een dozijn regels. Handig om een merkpalet in bulk te controleren.

Je hoeft het niet met de hand te berekenen. De [contrastchecker van WebAIM](https://webaim.org/resources/contrastchecker/) neemt twee hexcodes en vertelt welke niveaus slagen, en de kleurkiezer in de ontwikkelaarstools van Chrome toont de verhouding van elke tekst die je inspecteert.

## Kleurparen die slagen en falen

Merkkleuren zitten vaak in het lastige midden: te donker voor donkere tekst en te licht voor witte tekst. Middelgroene, oranje, roze en lichtblauwe tinten zijn de gebruikelijke boosdoeners. Dit zijn gangbare combinaties, met hun echte verhoudingen.

| Tekst op achtergrond | Verhouding | Gewone tekst | Grote tekst |
| --- | --- | --- | --- |
| Wit op `#7c3aed` violet | 5,7:1 | Voldoet | Voldoet |
| Wit op `#8b5cf6` licht violet | 4,2:1 | Voldoet niet | Voldoet |
| Wit op `#2563eb` blauw | 5,2:1 | Voldoet | Voldoet |
| Wit op `#3b82f6` hemelsblauw | 3,7:1 | Voldoet niet | Voldoet |
| Wit op `#10b981` groen | 2,5:1 | Voldoet niet | Voldoet niet |
| `#0b0b10` bijna zwart op `#10b981` groen | 7,7:1 | Voldoet | Voldoet |
| Wit op `#f59e0b` amber | 2,2:1 | Voldoet niet | Voldoet niet |
| `#999999` grijs op wit | 2,9:1 | Voldoet niet | Voldoet niet |
| `#6b7280` grijs op wit | 4,8:1 | Voldoet | Voldoet |

Een kleine verschuiving kan de doorslag geven: twee blauwtinten die bijna hetzelfde lijken landen aan weerszijden van 4,5:1.

> **Draai de tekst om, niet het merk** Als wit niet werkt op een felle merkkleur, probeer dan bijna zwarte tekst. Groen, amber en koraal slagen meestal ruim met donkere letters, en de kleur blijft precies zoals hij is. [Merkkleuren kiezen](https://gradiently.design/nl/guide/how-to-choose-brand-colors) laat zien hoe je dit vanaf het begin in een palet bouwt.

## Waarom kleurverlopen contrast lastiger maken

Een vlakke achtergrond heeft één contrastverhouding. Een kleurverloop heeft op elk punt een andere. Witte tekst die makkelijk slaagt op het donkere eind van een overgang kan op het lichte eind volledig falen, en een kop die zich over het kleurverloop uitstrekt slaagt en faalt in dezelfde regel.

Middernacht naar violet naar roze: `linear-gradient(90deg, #1f0b3a 0%, #7c3aed 55%, #f472b6 100%)`

Witte tekst scoort 18:1 links, 5,7:1 over het violet en 2,7:1 aan het roze eind. Eén kleurverloop, drie uitspraken.

De regel is simpel: test het lichtste punt achter lichte tekst, of het donkerste punt achter donkere tekst. Slaagt het slechtste punt, dan slaagt de hele regel. Gemiddelde kleuren en pipetmonsters uit het midden misleiden je.

## Zo herstel je contrast op een kleurverloop

1. **Verplaats de woorden naar het rustige eind** Zet tekst over het donkerste of lichtste deel van het kleurverloop en laat de heldere overgang daar vandaan gebeuren.
2. **Verklein het bereik achter de tekst** Houd het deel van het kleurverloop achter de woorden binnen een klein lichtheidsbereik. De rest van het canvas mag zo gedurfd zijn als je wilt.
3. **Voeg een zachte sluier toe** Een zachte donkere of lichte uitloop achter de tekst, zoals een kleurverloop van transparant naar 30% zwart, verhoogt het contrast zonder zichtbaar vak.
4. **Ga groter en vetter** Grote tekst heeft maar 3:1 nodig. Een zwaarder gewicht en een grotere maat kunnen een falende regel laten slagen.
5. **Test op een echte telefoon** Bekijk het ontwerp op volle helderheid en op lage helderheid, buiten als je kunt. Verhoudingen zijn de ondergrens, niet het doel.

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

De sluier verdonkert alleen waar het kleurverloop licht wordt, dus de linkerkant blijft onaangeroerd.

Een staande post waarop de kop Deuren open om zeven uur een helder deel van het kleurverloop kruist en moeilijk leesbaar wordt

De woorden lopen recht over het helderste deel van het vlak en hun contrast zakt.

Dezelfde staande post met een donkerder, rustiger deel van het kleurverloop achter de kop, zodat hij duidelijk leest

Hetzelfde ontwerp met het rustige, donkere gebied achter de woorden.

Dit is het idee achter de leesbaarheid van Gradiently: een Mark weet waar je woorden staan, verplaatst zijn rustigste gebied met het beste contrast erachter en kiest per regel lichte of donkere inkt uit zijn eigen palet. Voor meer technieken die overal werken, lees [tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient) en [leesbare tekst over foto’s](https://gradiently.design/nl/guide/text-over-image). Voor donkere interfaces specifiek, zie [ontwerpen voor donkere modus](https://gradiently.design/nl/guide/dark-mode-design).

## FAQ

### Wat is een goede kleurcontrastverhouding?

Minstens 4,5:1 voor gewone tekst en 3:1 voor grote tekst voldoet aan WCAG niveau AA. Voor lang lezen is 7:1 (niveau AAA) prettiger.

### Wat telt als grote tekst in WCAG?

Tekst van minstens 18 punt, ongeveer 24 px, of minstens 14 punt vet, ongeveer 18,66 px. Grote tekst heeft op niveau AA maar 3:1 nodig.

### Wat is het lichtste grijs dat ik op wit kan gebruiken?

`#767676` is het lichtste gewone grijs dat 4,5:1 haalt op wit. `#777777` meet 4,48:1 en voldoet niet voor lopende tekst.

### Moeten logo’s aan contrasteisen voldoen?

Nee. WCAG neemt tekst die deel is van een logo of merknaam uit, en puur decoratieve tekst. Alles wat mensen moeten lezen of gebruiken telt wel mee.

### Hoe controleer ik contrast op een kleurverloopachtergrond?

Meet de tekstkleur tegen het lichtste punt achter lichte tekst, of het donkerste punt achter donkere tekst. Slaagt dat slechtste punt, dan slaagt de hele regel.