# Tekst op een drukke achtergrond, leesbaar zonder kader

[Canonical HTML page](https://gradiently.design/nl/guide/type-on-busy-backgrounds)

De gebruikelijke oplossingen zijn een donker paneel, een slagschaduw of een vervaging. Elk ervan werkt, en elk ervan kondigt zichzelf aan. Er is een stillere manier om woorden leesbaar te maken.

## The short version

- Tekst op een drukke achtergrond is moeilijk te lezen omdat het contrast van letter tot letter verandert en de randen van de achtergrond concurreren met de vormen van de letters.
- Kaders, scrims, schaduwen en vervagingen maken tekst allemaal leesbaar, maar elk bedekt een deel van de achtergrond en verandert hoe het ontwerp aanvoelt.
- Woorden op het rustigste, gelijkmatigste deel van een achtergrond zetten is de oplossing die het ontwerp het minst kost.
- Per regel lichte of donkere inkt kiezen, op basis van wat er echt achter ligt, houdt elke regel leesbaar op een achtergrond die van licht naar donker loopt.
- Een achtergrond die zich rond de woorden herschikt, en erachter rustiger en dieper wordt, kan tekst leesbaar maken zonder zichtbare lap.

**Tekst op een drukke achtergrond** leesbaar maken komt neer op twee dingen: wat er direct achter de letters ligt, en welke kleur de letters hebben. De gangbare oplossingen, een kader, een schaduw of een vervaging, veranderen wat er achter de letters ligt door het te bedekken. De betere oplossingen zetten de woorden waar de achtergrond al rustig is, kiezen de inkt per regel, en laten, waar de tool het toelaat, de achtergrond ruimte maken in plaats van hem op te lappen.

Een kop direct op een gedetailleerde textuur met kleurverloop, waarbij de letters met de achtergrond concurreren

Met rust gelaten: de textuur loopt dwars door de woorden.

Dezelfde kop en textuur, met het rustigste deel van de achtergrond achter de woorden geschoven

Ruimte maken: het rustige deel van de textuur ligt erachter.

## Waarom drukke achtergronden en tekst botsen

Lezen hangt af van het contrast tussen elke letter en wat eromheen ligt. Op een egale kleur is dat contrast overal hetzelfde. Op een foto, een patroon of een levendig kleurverloop verandert het voortdurend: de ene letter staat op een hooglicht, de volgende op een schaduw, en het woord valt in stukken uiteen. Detail maakt het erger, omdat de randen en vormen van de achtergrond zelf een beetje op letterstreken lijken, en het oog de twee moet scheiden.

Daarom zijn contrastrichtlijnen, zoals de verhoudingen in [kleurcontrast](https://gradiently.design/nl/guide/color-contrast-accessibility), moeilijk toe te passen op drukke achtergronden: er is niet één achtergrondkleur om tegen te meten. De eerlijke test is de slechtste plek, het lichtste vlak achter lichte tekst of het donkerste achter donkere tekst.

## De gebruikelijke oplossingen, en wat elk ervan kost

Elke standaardoplossing werkt door te veranderen wat er direct achter de letters ligt. Ze zijn allemaal legitiem, en allemaal nemen ze iets weg van de achtergrond die je hebt gekozen.

| Oplossing | Hoe het werkt | Wat het kost |
| --- | --- | --- |
| Dicht kader | Een paneel in egale kleur achter de tekst | Bedekt de achtergrond; oogt als een etiket |
| Doorschijnend paneel | Een doorzichtig vlak dat donkerder of lichter maakt | Vertroebelt de kleuren eronder; de rand is te zien |
| Scrim | Een zacht verloop dat naar donker vervaagt achter de tekst | Maakt een hele kant van het beeld donkerder |
| Slagschaduw | Een donkere halo rond elke letter | Oogt gedateerd als hij zwaar is; modderig op kleur |
| Vervaagde lap | Vervaagt de achtergrond achter de woorden | Oogt onaf; verraadt waar de tekst komt |
| Contourlijn | Een contrasterende lijn rond elke letter | Verandert het karakter van het lettertype |

Zes gangbare oplossingen. Elk ervan werkt; elk ervan is zichtbaar.

Gebruik je er toch een, doe het dan zacht. Een scrim die over een groot vlak vervaagt valt minder op dan een kader, en een zachte, brede schaduw oogt minder gedateerd dan een harde. Dit is een ingetogen versie voor het web:

```css
.hero {
  position: relative;
}

/* A soft scrim: dark at the bottom, where the text sits, gone by the middle. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.2) 35%, rgb(0 0 0 / 0) 60%);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  /* A wide, faint shadow reads as depth, not as an outline. */
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.35);
}
```

Een zachte scrim en schaduw. Controleer het resultaat met een contrastchecker zoals die van [WebAIM](https://webaim.org/resources/contrastchecker/) op het lichtste punt achter de tekst.

## Beter: zet de woorden waar de achtergrond rustig is

De meeste drukke achtergronden hebben een rustiger gebied: een stuk lucht, een zachte poel van kleur, een onscherp deel. De tekst daarheen verplaatsen, of bijsnijden zodat dat gebied valt waar de tekst komt, lost het probleem op zonder iets te bedekken. Als je een achtergrond kiest of maakt, zoek er dan een met een rustig vlak waar je woorden meestal staan.

- Druk: tekst gaat hiermee botsen: `repeating-linear-gradient(45deg, #1d3557 0px, #1d3557 12px, #e63946 12px, #e63946 24px, #f1faee 24px, #f1faee 36px)`
- Een rustige poel in het midden: `radial-gradient(ellipse at 50% 50%, #f1faee 0%, #a8dadc 35%, #457b9d 70%, #1d3557 100%)`

Dezelfde drie kleuren, twee heel verschillende ondergronden voor woorden. Strepen geven elke letter een andere achtergrond; een radiaal veld geeft het midden een gelijkmatige, lichte poel waar donkere tekst zuiver leest.

Hetzelfde idee geldt voor foto’s, waar bijsnijden, vervaging en duotoon allemaal rust kunnen scheppen; [tekst op een afbeelding](https://gradiently.design/nl/guide/text-over-image) loopt zeven technieken door. Bij kleurverlopen is de rustige zone meestal waar de kleur het langzaamst verandert; [tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient) laat zien hoe je die vindt.

## Kies de inkt per regel

Een achtergrond die van licht naar donker loopt, is niet geholpen met één inktkleur. Witte tekst leest op de donkere helft en verdwijnt op de lichte helft. In plaats van er een paneel achter te forceren kies je de inkt per regel: lichte inkt waar de achtergrond achter die regel donker is, donkere inkt waar hij licht is. Haal beide inkten uit het eigen palet van de achtergrond, een diepe toon en een bleke, zodat ze bij het ontwerp horen en er niet opgeplakt uitzien.

### Eén inkt voor alles

- Witte kop over een licht en donker veld
- De helft van de letters verliest contrast
- Een kader toegevoegd om het te redden
- De achtergrond verdwijnt onder het kader

### Inkt gekozen per regel

- Elke regel gecontroleerd tegen wat erachter ligt
- Lichte inkt op donkere vlakken, donkere inkt op lichte
- Beide inkten uit het palet van de achtergrond
- Geen lap nodig

## Laat de achtergrond bewegen, niet de woorden

De stilste oplossing van allemaal is een achtergrond die weet waar de woorden staan. Zo gedraagt een Mark van Gradiently zich: in plaats van bedekt te worden, herschikt hij zichzelf. Het hele materiaal schuift zodat het rustigste gebied met het beste contrast achter de tekst ligt; dicht bij de letters worden kleuren dieper onder lichte tekst en lichter onder donkere tekst; drukke ribbels ontspannen. Niets daarvan is een vorm die je kunt aanwijzen. Het leest als het ontwerp, omdat het het ontwerp is.

De andere helft is inkt. Zet tekst op **Auto-inkt** en elke regel kiest de lichte of donkere inkt die het best leest tegen wat er echt achter ligt, uit een paar dat uit het eigen palet van de Mark komt. Verplaats een kop van een licht vlak naar een donker vlak en hij slaat stilletjes om. Jij bepaalt hoe sterk de achtergrond reageert: nauwelijks merkbaar, in balans, of een duidelijk podium voor een kop die moet aankomen.

> De beste oplossing voor leesbaarheid is degene die niemand opmerkt.

## Een checklist voor tekst op drukke achtergronden

1. **Zoek eerst het rustige vlak** Plaats of snijd bij zodat de woorden op het gelijkmatigste deel van de achtergrond staan.
2. **Controleer de slechtste plek** Test het contrast op het lichtste punt achter lichte tekst of het donkerste achter donkere tekst, niet het gemiddelde.
3. **Kies inkt per regel** Licht op donker, donker op licht, beide uit het palet van de achtergrond.
4. **Gebruik gewicht en grootte** Zwaardere, grotere letters overleven drukkere achtergronden. Haarlijndunne gewichten niet. [Lettertypen voor social media](https://gradiently.design/nl/guide/fonts-for-social-media) noemt letters die standhouden.
5. **Lap alleen op als laatste redmiddel** Als het moet, gebruik dan de zachtste oplossing: liever een zachte scrim dan een kader, liever een brede, vage schaduw dan een harde.

## FAQ

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

Zet de woorden op het rustigste deel van de achtergrond, kies per regel lichte of donkere inkt op basis van wat erachter ligt, en gebruik een zwaarder, groter gewicht. Gebruik alleen een zachte scrim als dat niet genoeg is.

### Is een slagschaduw een goede manier om tekst leesbaar te maken?

Een zachte, brede, vage schaduw kan helpen. Een harde, zware schaduw laat tekst gedateerd ogen en vertroebelt kleur, dus gebruik hem spaarzaam.

### Hoe controleer ik het contrast op een drukke achtergrond?

Meet op de slechtste plek, zoals het lichtste vlak achter lichte tekst, in plaats van de gemiddelde kleur. Een contrastchecker geeft de verhouding voor dat paar.

### Wat is Auto-inkt in Gradiently?

Auto-inkt kiest per regel lichte of donkere tekst uit het eigen palet van de Mark, op basis van wat er echt achter die regel ligt, en slaat om als de tekst verschuift.