Tekst op een kleurverloop: zo blijft hij altijd leesbaar

Wil je tekst op een kleurverloopachtergrond die altijd leest, zet de woorden dan boven het rustigste stuk van het kleurverloop, kies lichte of donkere inkt op basis van de lichtheid van de kleur direct erachter, houd kleine tekst weg van middentonen en test het contrast op het zwakste punt, niet op het gemiddelde. Grootte en gewicht doen de rest: grote, stevige letters overleven een veranderende achtergrond die dunne, kleine letters niet overleven.

Waarom tekst op een kleurverloop lastiger is dan het lijkt

Op een vlakke kleur is het contrast tussen tekst en achtergrond één getal. Op een kleurverloop verandert het langs het verloop. Witte tekst kan scherp zijn tegen de donkere kant en bijna onzichtbaar tegen de lichte kant, soms binnen één woord. Het kleurverloop hieronder laat zien hoe snel dat gaat.

De drempels komen uit de WCAG-richtlijn voor contrast: 4.5:1 voor gewone tekst en 3:1 voor grote tekst, ongeveer 24 pixels en groter, of zo’n 19 pixels in vet. Kleurcontrast legt de regels in gewone woorden uit.

Stap 1: vind de rustige zone

Elk kleurverloop heeft stukken waar de kleur langzaam verandert en stukken waar hij snel verandert. Tekst hoort in het langzame deel, omdat het contrast eronder bijna gelijk blijft. Bij een lineair kleurverloop is dat meestal één uiteinde; bij een radiaal kleurverloop het midden of de buitenrand; bij een mesh of aurora de grootste en egaalste kleurpoel.

Heb je het kleurverloop zelf in de hand, bouw de rustige zone dan in: houd een kleur langer vast door een stop te herhalen, zoals het eerste voorbeeld doet. Krijg je het kleurverloop aangeleverd, verplaats dan de tekst in plaats van ertegen te vechten.

Stap 2: kies inkt op lichtheid, niet op tint

Contrast draait om lichtheid. Een fel violet en een fel oranje kunnen even krachtig ogen, maar wit leest goed op het violet en slecht op het oranje, omdat het oranje veel lichter is. Negeer bij het kiezen van inkt de tint en vraag je af: is de kleur achter deze regel donker of licht?

Getinte inkt voelt doordachter dan puur wit en zwart. Neem een heel bleke tint van de lichtste kleur van het kleurverloop en een heel diepe schaduw van de donkerste; die dragen het palet door in de tekst en hebben meestal genoeg contrast. Modderige kleurverlopen legt uit waarom mengingen in het midden überhaupt lichtheidscontrast verliezen.

Stap 3: blijf uit de valkuil van middentonen

Kijk naar de rij magenta in de tabel: 4.7:1 met wit en 4.2:1 met bijna zwart. Geen van beide inkten heeft veel marge. Kleuren met een gemiddelde lichtheid zitten in het midden van de meeste kleurverlopen, precies waar mensen hun tekst graag centreren. Kleine tekst is daar krap, welke inkt je ook kiest.

• Verplaats de tekst naar de donkere of lichte kant.
• Verschuif het kleurverloop zodat de stop achter de tekst donkerder of lichter is.
• Maak de tekst groot en vet, zodat de lagere drempel van 3:1 voor grote tekst geldt.
• Bewaar de middentonen voor versiering, vormen en ruimte, niet voor woorden.

.banner {
  /* The dark stop is held to 45%, so the headline on the left sits on one lightness. */
  background: linear-gradient(90deg, #1e1b4b 0%, #1e1b4b 45%, #7c3aed 70%, #ec4899 100%);
  color: #f5f3ff; /* a pale violet tint rather than pure white */
}

.banner h1 {
  max-width: 40%;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Stap 4: gebruik grootte en gewicht

Zwaardere, grotere letters hebben meer oppervlak en worden als vormen gelezen, dus ze verdragen een veranderende achtergrond beter. Haarlijn- en lichte gewichten vallen uiteen als de kleur erachter verschuift. Zet lopende tekst op een kleurverloop in regular, medium of bold in plaats van lichte gewichten, en houd koppen royaal. Lettertypen voor social media noemt stevige letters die op telefoons lezen.

Stap 5: test op telefoonformaat en in grijstinten

1. 1

   Meet het zwakste punt

   Neem de lichtste kleur achter lichte tekst, of de donkerste achter donkere tekst, en controleer de verhouding.

2. 2

   Bekijk het in grijstinten

   Haal de kleur uit een kopie van het ontwerp. Zonder tint valt zwak lichtheidscontrast meteen op.

3. 3

   Bekijk het op een telefoon

   Op armlengte, bij daglicht als het kan. Kleine tekst op kleurverlopen gaat daar als eerste mis.

4. 4

   Knijp je ogen samen

   Knijp je ogen half dicht. De tekst moet nog steeds als vorm loskomen van de achtergrond.

Voor achtergronden die drukker zijn dan een kleurverloop, zoals foto’s en texturen, zie tekst op drukke achtergronden. In Gradiently schuiven Marks hun rustigste deel achter de woorden, en Auto-inkt kiest voor elke regel lichte of donkere tekst uit het eigen palet van de Mark, zodat de methode hierboven gebeurt terwijl je typt.