Achtergrond voor tekst: wat woorden makkelijk leesbaar maakt

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 berekent hem voor elke twee kleuren.

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

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 behandelt patronen uitgebreider en leesbare tekst op foto’s 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.

Zo test je elke achtergrond voor tekst

1. 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. 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. 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. 4

   Controleer de uitersten

   Meet het contrast op de lichtste en donkerste punten achter de woorden, niet het gemiddelde.

5. 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.

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.

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

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 legt de details uit en tekst op een kleurverloop geeft de handmatige methode voor elk kleurverloop.