Ruim 300 miljoen mensen wereldwijd hebben een vorm van kleurenblindheid. Nog veel meer mensen hebben moeite met lezen door slechtziendheid, vermoeidheid of felle schermen. Een website die rekening houdt met kleurcontrast en lettergrootte is niet alleen toegankelijker — hij is ook aangenamer voor iedereen.
Kleurcontrast: de WCAG-norm
WCAG 2.1 vereist voor normale tekst een contrastverhouding van minimaal 4,5:1 ten opzichte van de achtergrond. Voor grote tekst (18pt of 14pt bold) geldt een minimum van 3:1. Dit klinkt abstract, maar is eenvoudig te meten. Typ in Google ‘kleurcontrast checker’ of gebruik de gratis tool van WebAIM: webaim.org/resources/contrastchecker.
Veelgemaakte fouten: lichtgrijze tekst op witte achtergrond, gele tekst op witte achtergrond, of kleurcodes die alleen voor mensen met normaal kleurenzicht onderscheidbaar zijn.
Kleur als enige informatiedrager
WCAG verbiedt het gebruik van kleur als enige manier om informatie over te brengen. Een foutmelding die alleen rood is (zonder tekst of icoon), een verplicht veld dat alleen met een rode rand aangegeven wordt — dit werkt niet voor kleurenblinde gebruikers. Voeg altijd een tekstlabel, icoon of patroon toe naast de kleur.
Lettergrootte en regelafstand
WCAG schrijft geen minimale lettergrootte voor, maar praktisch geldt: gebruik minimaal 16px voor bodytekst op desktop en 14px op mobiel. Regelafstand (line-height) van minimaal 1,5 verbetert de leesbaarheid significant voor dyslectische lezers. Gebruik nooit tekst die kleiner is dan 12px — ook niet voor voetnoten of disclaimers.
💡 FRL Tip: Controleer uw website snel met de Chrome-extensie ‘Colour Contrast Analyser’ of via het Accessibility-paneel in Chrome DevTools. Problemen zijn direct zichtbaar als rode markeringen.