Licht grijs op wit. Subtiele placeholder-tekst in formulieren. Witte letters op een foto. Het ziet er strak en modern uit, tot je beseft dat een aanzienlijk deel van je bezoekers je tekst gewoon niet kan lezen.
Kleurcontrast is een van de meest onderschatte onderdelen van webdesign. Het heeft direct invloed op leesbaarheid, vindbaarheid en conversie, maar wordt in de praktijk vaak opgeofferd voor esthetiek.
Wat is kleurcontrast precies?
Kleurcontrast is het verschil in helderheid tussen tekst en de achtergrond waarop die tekst staat. Technisch heet dit de contrastverhouding: een getal dat aangeeft hoe groot het verschil in luminantie is tussen twee kleuren.
Een ratio van 1:1 betekent dat beide kleuren identiek zijn en tekst volledig onleesbaar is. Een ratio van 21:1 is het maximale contrast, namelijk zwart op wit. Hoe hoger het getal, hoe beter de leesbaarheid.
De WCAG-norm: wat de richtlijn precies zegt
De Web Content Accessibility Guidelines (WCAG) 2.1 zijn de internationale standaard voor toegankelijkheid op het web. Voor kleurcontrast stelt niveau AA, de meest gehanteerde norm:
- 4,5:1 voor normale tekst (kleiner dan 18 pt of 14 pt vet)
- 3:1 voor grote tekst (18 pt of groter, of 14 pt vet)
- 3:1 voor UI-componenten zoals knoppen, iconen en formulierelementen
Niveau AAA stelt hogere eisen: 7:1 voor normale tekst en 4,5:1 voor grote tekst. Dat is voor de meeste bedrijfssites niet verplicht, maar soms wel nastrevenswaardig voor teksten die centraal staan.
Het zijn geen willekeurige getallen. Ze zijn gebaseerd op onderzoek naar de minimale leesbaarheid voor mensen met een matig gezichtsverlies die geen hulptechnologie gebruiken.
Wie heeft er last van slecht contrast?
Ongeveer 300 miljoen mensen wereldwijd hebben een vorm van kleurblindheid. Dat is 1 op de 12 mannen en 1 op de 200 vrouwen. Zij hebben niet per se moeite met tekst lezen, maar wel met kleurcodering als enige informatiedrager.
Slecht lichtcontrast treft een bredere groep:
- Oudere bezoekers. Rond het vijftigste levensjaar neemt de oogpupil gemiddeld de helft minder licht op dan op het twintigste. Dat maakt laag contrast letterlijk moeilijker te onderscheiden.
- Mobiele gebruikers in de buitenlucht. Direct zonlicht op een telefoonscherm vermindert het effectieve contrast aanzienlijk.
- Iedereen die snel scant. Bij lage concentratie of vluchtig lezen valt tekst met weinig contrast weg.
Dat zijn niet de randgevallen. Dat zijn je klanten.
Veelgemaakte contrastfouten
Lichtgrijs op wit
Licht grijs op een witte achtergrond is de meest voorkomende fout. Populaire voorbeelden zijn te vinden in veel minimalistisch design: #999999 op #FFFFFF haalt een ratio van 2,85:1, ver onder de vereiste 4,5:1. Subtitels, disclaimers en formulierlabels worden hiermee onleesbaar voor een significant deel van je bezoekers.
Placeholder-tekst in formulieren
Placeholder-teksten zijn bijna altijd te licht. Browsers renderen ze standaard in een grijstint die soms net de grens haalt, maar veel ontwerpers kiezen een nóg lichtere kleur omdat het "mooier oogt". Het resultaat: bezoekers weten niet meer wat ze in een veld moeten invoeren nadat ze erin klikken.
Tekst op afbeeldingen of gradients
Witte letters op een lichte foto of een gradient die van donker naar licht loopt. Op desktop met een groter scherm op heldere instelling werkt het. Op een mobiel buiten, bij een iets andere afbeeldingscrop, of voor iemand met verminderd zicht verdwijnt de tekst.
Knoppen met een zachte kleur
Zachte pasteltinten voor primaire CTA-knoppen zien er vriendelijk uit, maar scoren slecht op contrast. Een lichtblauwe knop met witte tekst haalt zelden de 4,5:1 die nodig is.
Hoe je contrast controleert
Je hoeft geen kleurtheorie te kennen om dit te checken. Er zijn simpele, gratis tools:
WebAIM Contrast Checker (webaim.org/resources/contrastchecker/) is de meest gebruikte online tool. Voer de hex-waarden in van tekst en achtergrond en je ziet direct of je voldoet aan AA of AAA.
Chrome DevTools heeft een ingebouwde contrast-check. Klik op een tekstelement in de inspector, ga naar het kleurveld in de CSS, en DevTools toont de contrastverhouding direct naast de kleurwaarde.
Figma-plugins zoals Stark of A11y - Color Contrast Checker controleren je ontwerp direct in Figma voordat je ook maar een regel code schrijft. Dat scheelt later herstelwerk.
Bij Web Design by Kick draaien we bij elk ontwerp een geautomatiseerde toegankelijkheidsscan, zodat contrastfouten worden gevonden voordat een site live gaat.
Contrast en conversie: de directe link
Toegankelijkheid en conversie worden vaak als aparte onderwerpen behandeld, maar slecht contrast heeft direct meetbaar effect op je resultaten.
Wanneer bezoekers moeite hebben met lezen, haken ze af. Ze scrollen niet verder omdat ze de waarde niet kunnen lezen. Ze vullen een formulier niet in omdat de labels onduidelijk zijn. Ze klikken niet op een knop die ze niet goed kunnen onderscheiden.
De Nielsen Norman Group heeft in meerdere onderzoeken aangetoond dat leesbaarheid een van de belangrijkste factoren is voor gebruikerstevredenheid. Een pagina die moeilijk te lezen is, wordt als minder betrouwbaar ervaren, ongeacht de inhoud.
Contrast verbeteren zonder je ontwerp te ruineren
Het veelgehoorde bezwaar is dat hoog contrast botst met een strak, modern design. Dat klopt niet per se. Contrast gaat over de verhouding tussen tekst en achtergrond, niet over een verbod op kleur of subtiliteit.
Een paar praktische uitgangspunten:
- Gebruik
#595959of donkerder voor tekst op een witte achtergrond, niet#999999. - Controleer je primaire merk-kleur op leesbaarheid als achtergrond voor witte tekst. Donkere tinten halen de norm sneller dan lichte.
- Zet tekst op afbeeldingen altijd op een donkere overlay of gebruik een semi-transparante laag achter de tekst.
- Test je ontwerp met de Chrome DevTools accessibility-audit op echte content, niet op lorem ipsum.
- Controleer ook je hover-states en disabled-states van knoppen, want ook die vallen onder de WCAG-norm.
Conclusie
Kleurcontrast is geen technisch detail, het is een designbeslissing met directe invloed op wie je site kan lezen en wat je conversie oplevert. De WCAG 4,5:1 norm is geen bureaucratische eis maar een ondergrens van leesbaarheid. Met de juiste tools is het in vijf minuten te controleren en in de meeste gevallen net zo snel opgelost.