# Achtergrond voor tekst: wat woorden makkelijk leesbaar maakt

[Canonical HTML page](https://gradiently.design/nl/guide/gradient-background-for-text)

Sommige achtergronden dragen woorden moeiteloos en andere vechten met elke letter. Het verschil komt neer op drie eigenschappen die je in een minuut controleert.

## The short version

- Een goede achtergrond voor tekst heeft op de plek van de woorden drie eigenschappen: genoeg contrast, weinig fijn detail en een smal toonbereik.
- WCAG vraagt om een contrastverhouding van minstens 4,5:1 voor gewone tekst en 3:1 voor grote tekst.
- Detail van ongeveer dezelfde grootte als de letters, zoals bladeren, menigten of drukke patronen, schaadt het lezen meer dan kleur.
- Een ontwerp half dichtknijpen, vervagen of in grijstinten bekijken laat snel zien of het tekstgebied rustig genoeg is.
- De woorden naar een rustiger deel van de achtergrond verplaatsen is meestal beter dan er een vak of schaduw achter te zetten.

Een goede **achtergrond voor tekst** heeft in het gebied achter de woorden drie dingen: sterk contrast met de letters, heel weinig fijn detail en een gelijkmatig toonbereik in plaats van lichte en donkere plekken. Kleur doet veel minder ertoe dan mensen denken. Een violet kleurverloop kan tekst prachtig dragen en een grijze foto kan hem verpesten, afhankelijk van die drie eigenschappen. Deze gids laat zien hoe je elke achtergrond beoordeelt, foto, kleurverloop of textuur, en wat je doet als er een faalt.

## Contrast: de eerste eigenschap

Contrast is het verschil in helderheid tussen de letters en wat er direct achter staat. De Web Content Accessibility Guidelines leggen de meetbare lat: een verhouding van minstens 4,5:1 voor gewone tekst en 3:1 voor grote tekst. [De contrastchecker van WebAIM](https://webaim.org/resources/contrastchecker/) berekent hem voor elke twee kleuren.

| Tekst | Achtergrond | Contrastverhouding | Oordeel |
| --- | --- | --- | --- |
| Wit `#ffffff` | Diep indigo `#1e1b4b` | 16:1 | Uitstekend op elk formaat |
| Wit `#ffffff` | Violet `#7c3aed` | 5,7:1 | Voldoet voor lopende tekst |
| Wit `#ffffff` | Leisteen `#64748b` | 4,8:1 | Voldoet net |
| Wit `#ffffff` | Roze `#f472b6` | 2,6:1 | Voldoet niet, zelfs niet voor grote tekst |
| Bijna zwart `#1a1a1a` | Roze `#f472b6` | 6,6:1 | Voldoet: hetzelfde roze, donkerdere inkt |
| Wit `#ffffff` | Oranje `#fb923c` | 2,3:1 | Voldoet niet |

Echte verhoudingen voor gangbare combinaties. Felle roze, oranje, gele en lichte turquoise tinten hebben donkere tekst nodig, hoe goed witte tekst er ook op voelt.

Bij een effen kleur is één controle genoeg. Bij een kleurverloop of foto verandert de achtergrond onder elk woord, dus controleer de lichtste plek achter lichte tekst en de donkerste plek achter donkere tekst. Daar faalt tekst als eerste. [Kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility) gaat dieper in op de normen.

## Detail: waarom drukke achtergronden moeilijk te lezen zijn

Contrast is nodig maar niet genoeg. Een achtergrond vol detail van dezelfde grootte als de letters maakt lezen moeilijk, ook als de verhouding voldoet, omdat het oog de vormen van letters niet kan scheiden van de vormen erachter. Bladeren, grind, menigten, fijne strepen en kleine patronen zijn de ergste boosdoeners. Grote, zachte vormen zijn het best: een lucht, een vage muur, een glad kleurverloop.

- Glad: draagt tekst goed: `linear-gradient(160deg, #1e1b4b 0%, #4c1d95 100%)`
- Eén zacht licht: woorden gaan linksonder: `radial-gradient(circle at 80% 20%, #7c3aed 0%, #1e1b4b 60%)`
- Fijne strepen: vecht met elke letter: `repeating-linear-gradient(45deg, #1e1b4b 0px, #1e1b4b 6px, #7c3aed 6px, #7c3aed 12px)`
- Kleine ringen: onleesbaar: `repeating-radial-gradient(circle at 50% 50%, #4c1d95 0px, #4c1d95 4px, #c4b5fd 4px, #c4b5fd 9px)`

Dezelfde twee kleuren op vier manieren. Het bovenste paar draagt woorden makkelijk, het onderste paar heeft detail op lettergrootte en maakt van elke tekst een worsteling.

Textuur is prima als de korrel veel kleiner is dan de letters, zoals filmkorrel of papiernerf. Het wordt een probleem als de kenmerken van de textuur in de buurt komen van de grootte van de lijnen in je letters. Hou je van een patroon, schaal het dan op tot de vormen duidelijk groter zijn dan de letters, of houd het weg van de woorden. [Tekst op drukke achtergronden](https://gradiently.design/nl/guide/type-on-busy-backgrounds) behandelt patronen uitgebreider en [leesbare tekst op foto’s](https://gradiently.design/nl/guide/readable-text-on-photos) behandelt beelden.

## Toonbereik: lichte en donkere plekken onder één regel

De derde eigenschap is die waar mensen in trappen. Als één regel tekst zowel een lichte als een donkere plek kruist, kan geen enkele tekstkleur werken: wit verdwijnt op het lichte deel en zwart op het donkere. Een goede achtergrond voor tekst houdt onder elke regel een smal toonbereik, helemaal licht of helemaal donker.

Een staande post waarbij de kop over lichte en donkere gebieden van een kleurverloop loopt en delen ervan moeilijk leesbaar zijn

De kop kruist lichte en donkere delen van de achtergrond, dus sommige letters verdwijnen welke inktkleur je ook kiest.

Dezelfde post met een rustig, gelijkmatig getint gebied van het kleurverloop achter de kop zodat elke letter leest

Dezelfde achtergrond met een gelijkmatig, dieper gebied achter de woorden. Eén inktkleur werkt nu voor elke letter.

## Zo test je elke achtergrond voor tekst

1. **Knijp je ogen dicht** Sluit je ogen half. Detail vervaagt en alleen toon blijft over. Lossen de woorden op in de achtergrond, dan is het contrast te laag.
2. **Vervaag hem** Zet een flinke vervaging op een kopie van alleen de achtergrond. Wat er onder het tekstgebied overblijft, is de toon waarop de letters echt staan.
3. **Bekijk hem in grijstinten** Kleur kan je laten denken dat het contrast goed is. Grijstinten tonen alleen helderheid, en daar hangt leesbaarheid van af.
4. **Controleer de uitersten** Meet het contrast op de lichtste en donkerste punten achter de woorden, niet het gemiddelde.
5. **Bekijk hem op een telefoon** Op armlengte, bij daglicht, op het formaat waarop mensen hem echt zien.

## Een achtergrond repareren die met de tekst vecht

De meeste oplossingen voegen iets toe: een vak, een schaduw, een donkere band. Ze werken, maar elk is een pleister waardoor het ontwerp er gered uitziet. Probeer de oplossingen in deze volgorde, van minst zichtbaar naar meest.

### Probeer eerst

- Verplaats de woorden naar het rustigste deel van de achtergrond
- Snijd de achtergrond bij of verplaats hem zodat een rustig gebied erachter zit
- Wissel van inkt: donkere tekst op lichte gebieden, lichte op donkere
- Maak de letters groter en zwaarder
- Verdiep of verlicht de achtergrond alleen rond de woorden

### Spaarzaam gebruiken

- Effen vakken of banden achter tekst
- Slagschaduwen op letters
- Contouren rond letters
- Flinke vervaging over de hele afbeelding
- Een donkere overlay over de hele achtergrond

Op het web is een zachte kleurverloopoverlay aan één kant van een heroafbeelding een nette versie van de vijfde oplossing: hij verdiept alleen het gebied onder de woorden en laat de rest van het beeld met rust.

```css
.hero {
  min-height: 70vh;
  color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(15 12 30 / 0.85) 0%, rgb(15 12 30 / 0.45) 45%, rgb(15 12 30 / 0) 70%),
    url("/images/hero.jpg");
  background-size: cover;
  background-position: center;
}
```

Verdiept de linkerkant, waar de kop staat, en vervaagt tot niets op 70 procent van de breedte. Controleer het contrast op het lichtste punt achter de tekst.

Gradiently bouwt de minst zichtbare oplossingen in de achtergrond zelf in. Een Mark weet waar je woorden staan: zijn rustigste, best contrasterende gebied verplaatst zich achter de tekst, kleuren bij de letters worden dieper of lichter, drukke details worden rustiger en Auto-inkt kiest per regel lichte of donkere letters uit het palet van de Mark. Er zijn geen vakken, schaduwen of vervaging, en jij kiest hoe sterk hij reageert. [Hoe Auto-inkt werkt](https://gradiently.design/nl/guide/auto-ink-legibility) legt de details uit en [tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient) geeft de handmatige methode voor elk kleurverloop.

## FAQ

### Wat is de beste achtergrondkleur voor tekst?

Elke kleur die sterk contrasteert met de tekst, minstens 4,5:1 voor gewone tekst. Heel lichte of heel donkere achtergronden zijn het makkelijkst, felle middentinten zoals roze, oranje en geel hebben donkere tekst nodig.

### Welke contrastverhouding heeft tekst nodig?

WCAG vraagt om minstens 4,5:1 voor gewone tekst en 3:1 voor grote tekst.

### Waarom is mijn tekst moeilijk te lezen terwijl het contrast voldoet?

De achtergrond heeft waarschijnlijk detail in de buurt van de lettergrootte, of lichte en donkere plekken onder dezelfde regel. Verplaats de woorden naar een rustiger, gelijkmatiger gebied.

### Hoe maak ik tekst leesbaar op een drukke achtergrond?

Verplaats de woorden eerst naar het rustigste gebied of kader het beeld opnieuw. Kan dat niet, verdiep of verlicht dan alleen het gebied achter de tekst en gebruik vakken of schaduwen als laatste redmiddel.

### Leest witte of zwarte tekst makkelijker op kleur?

Dat hangt af van de helderheid van de kleur. Donkere kleuren hebben witte tekst nodig, lichte en felle kleuren lezen meestal beter met bijna zwart.