WCAG 2.1 Normen: Wat Je Moet Weten
Een overzicht van de drie WCAG-niveaus (A, AA, AAA) en welk niveau voor jouw website het meest geschikt is.
Kleurencontrast: Niet Alleen voor Daltonisten
Waarom goed kleurencontrast essentieel is en hoe je dit correct meet. We tonen je tools en geeft concrete voorbeelden van wat wel en niet werkt.
Meer dan alleen een ontwerp kwestie
Je denkt misschien dat kleurencontrast alleen belangrijk is voor mensen met kleurenblindheid. Dat’s niet helemaal juist. Goed contrast helpt eigenlijk iedereen. We’re niet alleen aan het spreken over daltonisten — we’re aan het spreken over iedereen die ooit op hun telefoon in het zonlicht heeft geprobeerd iets te lezen.
Het WCAG 2.1 standaard — de richtlijn voor webtoegankelijkheid die in België veel gevolgd wordt — heeft duidelijke eisen voor kleurencontrast. Dit zijn geen vage richtlijnen. Het zijn meetbare, specifieke verhoudingen die je kunt controleren en verifiëren. En dat’s precies wat we vandaag gaan doen.
Over dit artikel: Dit is informatie ter educatie over WCAG-richtlijnen en webtoegankelijkheid. De getallen en richtlijnen hier zijn afkomstig van de officiële WCAG 2.1 standaard. Voor specifieke juridische of implementatievragen voor jouw project, adviseren we je om contact op te nemen met een gespecialiseerde webtoegankelijkheidsdeskundige.
Hoe contrastverhouding werkt
Laten we beginnen met de basis. Contrastverhouding is een wiskundige berekening — niets magisch. Het vergelijkt de helderheid van twee kleuren. De verhouding loopt van 1:1 (geen contrast) tot 21:1 (maximum contrast, meestal zwart op wit).
WCAG heeft drie niveaus: Level A (het minimum), Level AA (veel aanbevolen), en Level AAA (stricter). Voor normale tekst op websites vereist Level AA minstens 4.5:1 verhouding. Voor grotere tekst (minstens 18pt of 14pt bold) kun je volstaan met 3:1. Klinkt ingewikkeld? Wacht tot je ziet hoe je het meet — het’s eigenlijk behoorlijk simpel.
4.5:1
Minimum voor normale tekst (AA)
3:1
Minimum voor grote tekst (AA)
7:1
Minimum voor normale tekst (AAA)
Tools voor het testen van contrast
Je hoeft geen wiskundige te zijn om kleurencontrast te testen. Er zijn gratis online tools beschikbaar die het voor je doen. WebAIM’s Contrast Checker is waarschijnlijk het populairst — je voert twee kleuren in (in hex of RGB), en het berekent onmiddellijk de verhouding.
Chrome DevTools heeft ook ingebouwde contrast-checking. Open DevTools, ga naar de Color Picker, en je ziet meteen of je tekst voldoet aan AA of AAA. Kan niet gemakkelijker. Plus, browser-extensions zoals WAVE en Axe helpen je volledige pagina’s te scannen op contrast-problemen. Je installeert ze eenmaal, en je hebt een second pair of eyes die altijd controleert.
WebAIM Contrast Checker
Voer twee kleuren in, krijg instant feedback. Werkt in je browser, geen download nodig.
Chrome DevTools Color Picker
Klik op een element, kijk naar contrast ratio direct in DevTools. Ingebouwd, altijd beschikbaar.
Axe Browser Extension
Scant hele pagina’s automatisch. Toont alle contrast-problemen in één overzicht. Gratis en snel.
Wat werkt, wat niet — praktische voorbeelden
Theorie is nuttig, maar laten we realistisch zijn. Je wilt weten wat je daadwerkelijk moet doen. Hier zijn enkele concrete voorbeelden.
Goed contrast — donkerblauwe tekst op witte achtergrond
Dit werkt. Donkerblauw (#1e3a8a) op wit (#ffffff) geeft een verhouding van ongeveer 8.6:1. Dit haalt makkelijk AA en zelfs AAA. Je kunt dit lezen in elk licht, op elk apparaat, door bijna iedereen.
Grensgevallen — grijs op lichtgrijs
Dit is waar veel websites mee worstelen. #757575 op #f3f3f3? Dat’s ongeveer 4.4:1. Technisch haalt het Level AA voor normale tekst, maar het’s dicht bij de grens. Voeg glare of slechte beeldschermhelderheid toe, en plotseling kan niemand het lezen. Dit’s geen goed design.
Slecht contrast — lichtblauw op wit
#87ceeb (sky blue) op wit (#ffffff) geeft slechts 1.8:1. Dit faalt elke WCAG-test. Je kunt het bijna niet zien. En ja, je hebt dit waarschijnlijk ergens op het web gezien — misschien op een klein “Lees meer” linkje in lichtblauwe lettering.
En ja — dit gaat wel degelijk om kleurenblindheid
Ongeveer 8% van de mannen en 0.5% van de vrouwen hebben een vorm van kleurenblindheid. Dat’s geen kleine groep. De meest voorkomende vorm is rood-groen blindheid, waarbij mensen rood en groen niet kunnen onderscheiden.
Maar hier’s het ding: zelfs als iemand geen kleurenblindheid heeft, kan slecht contrast voor hen onleesbaar zijn. Ouderen hebben vaak verminderde contrast-gevoeligheid. Mensen met astigmatisme zien vagen omtrekken. Iemand die op hun telefoon in de zon zit, kan minder contrast zien vanwege de glare. En iedereen — echt iedereen — heeft moeilijker om tekst te lezen als het contrast slecht is. Het’s niet eens aangenaam.
Goed kleurencontrast helpt dus iedereen. Dat’s niet aardig zijn voor mensen met kleurenblindheid — dat’s basis webdesign.
Gerelateerde artikelen
Klaar om aan de slag te gaan?
Goed kleurencontrast is niet moeilijk. Het vereist geen speciale designvaardigheden of dure tools. Open WebAIM’s Contrast Checker, controleer je huidige kleuren, en pas ze aan als nodig. Test met DevTools. Scan met Axe. Het duurt misschien een uur om je website te controleren, maar het’s de beste uur die je voor toegankelijkheid kunt besteden.
En onthoud: dit helpt niet alleen mensen met kleurenblindheid. Het helpt iedereen. Slechter zicht, ouder worden, zwakke beeldschermen, zonlicht — we’re allemaal beter af met goed contrast. Dus laten we het goed doen.