Contact Us
Contact Us
Toegankelijkheid

Contrast en Toegankelijkheid: Kleur Kiezen voor Iedereen

WCAG-richtlijnen zijn niet verwarrend — en ze zorgen ervoor dat je site voor meer mensen werkt. Hier’s hoe je het doet.

9 min Intermediate Februari 2026
Toegankelijkheidstestrapport met contrastratings voor webkleurenontwerp

Waarom contrast echt uitmaakt

Stel je voor: je bent op een website, en de tekst smelt gewoon weg in de achtergrond. Niet leuk, toch? Dit is precies wat tienduizenden mensen dagelijks meemaken die visuele beperkingen hebben. We’re niet alleen aan het praten over kleurenblindheid — we’re ook bezig met leesbaarheid voor iedereen.

Het goede nieuws: goed contrast is niet ingewikkeld. Het gaat om getallen, verhoudingen, en een paar eenvoudige regels. Zodra je de basis snapt, kun je designs maken die er niet alleen geweldig uitzien, maar die ook voor meer mensen werken. En dat’s waar het om draait.

Twee vergelijkingen van websitescreenshots: één met slecht contrast en één met goed contrast

De getallen achter WCAG

WCAG staat voor Web Content Accessibility Guidelines. Klinkt officieel, maar het gaat eigenlijk gewoon om verhoudingen. De richtlijn zegt: normale tekst moet een contrast van minstens 4.5:1 hebben. Grote tekst (18pt of groter) kan met 3:1 weg.

Wat betekent dat in de praktijk? Je kan niet gewoon lichtgrijs op wit gebruiken. Dat haalt niet eens de 2:1. Je hebt echt wat meer verschil nodig. Donkergrijs op wit? Dat werkt. Zwart op wit? Dat’s eigenlijk 21:1 — je overkill, maar hey, leesbaar is leesbaar.

  • AA niveau: 4.5:1 voor normale tekst, 3:1 voor grote tekst
  • AAA niveau: 7:1 voor normale tekst, 4.5:1 voor grote tekst
  • UI-componenten: minstens 3:1 contrast tegen aangrenzende kleuren
Visuele weergave van contrastratio's van 2:1 tot 21:1 met bijbehorende tekstkleurkombinaties

Tools die je leven gemakkelijker maken

Je hoeft niet handmatig te berekenen. Er’s heel veel tooling beschikbaar. WebAIM’s Contrast Checker is gratis en je hoeft alleen maar twee kleuren in te voeren. De tool vertelt je exact wat de ratio is en of het voldoet aan AA en AAA.

Dan’s er ook Polypane — dat’s een browser gemaakt voor designers en developers. Het checkt automatisch contrasten terwijl je aan het ontwerpen bent. Veel sneller dan steeds naar een andere tool te gaan. Plus, je ziet direct welke elementen niet voldoen.

Chrome DevTools heeft ook een ingebouwde checker. Rechtsklik op een element, kies Inspect, en je ziet de contrastratio in het Styles paneel. Handig voor quick checks terwijl je debug je code.

Screenshot van een contrast-checkertool die twee kleuren analyseert en de ratio weergeeft

Praktische stappen voor je eigen designs

01

Start met je achtergrond

Kies je achtergrondkleur eerst. Dat’s je ankerpunt. Alles wat erop komt moet daar tegenaf contrasten. Donkere achtergrond? Lichter tekst. Lichte achtergrond? Donkerder tekst. Dit is het fundament.

02

Test je primaire tekstkleur

Gooi je achtergrondkleur en je voorkeurstekstkleur in een contraster. Krijg je 4.5:1 of hoger? Mooi. Minder? Je moet je tekstkleur lichter of donkerder maken. Proberen tot het werkt.

03

Check secundaire elementen

Knopjes, links, accent-kleuren — alles krijgt dezelfde behandeling. Minstens 3:1 voor UI-elementen. Je’d surprised hoe veel designs dit missen. Subtiele grijze buttons op lichte achtergronden? Niet goed genoeg.

04

Controleer op kleurenblindheid

Niet alleen gaat het om contrast — het gaat ook om dat mensen niet op kleur alleen moeten vertrouwen. Gebruik een simulator zoals Stark of Color Oracle om te zien hoe je design eruit ziet voor mensen met verschillende soorten kleurenblindheid.

Veelgemaakte fouten (en hoe je ze vermijdt)

Designers maken vaak dezelfde dingen fout. Ze zien hun design op een goed scherm met veel licht en denken: “Dit ziet er goed uit!” Maar op een ander apparaat of in ander licht? Plotseling is die lichtgrijze tekst onleesbaar.

Of ze vertrouwen alleen op kleur. Rood voor fout, groen voor succes. Maar wat als iemand dat niet kan onderscheiden? Dan begrijpen ze je bericht niet. Voeg altijd iets anders toe — een pictogram, tekst, een patroon.

En die “zeer lichte grijze tekst ziet elegant uit” trend? Vergeet het. Elegantie betekent niets als niemand het kan lezen. Genoeg contrast is het echte elegant.

Onthoud dit

Contrast is niet ingewikkeld. Het’s gewoon wiskunde. 4.5:1 voor normale tekst. 3:1 voor grote tekst en UI-elementen. Test je kleuren met een tool. Klaar.

Het voordeel? Je website wordt automatisch beter voor iedereen. Niet alleen voor mensen met visuele beperkingen, maar ook voor iedereen die je site op een ander apparaat leest, in ander licht, of onder minder ideale omstandigheden.

Goed contrast is geen vereiste die je tegenzin volgt. Het’s een kwaliteitsstandaard die je designs sterker maakt. Dat’s waarom het’s waard om het goed te doen.

Disclaimer

Dit artikel is informatief bedoeld en gebaseerd op WCAG 2.1-richtlijnen. Wetgeving rond webtoegankelijkheid varieert per land en kan veranderen. Voor juridische vragen over compliance raad je aan rechtsbijstand in te schakelen. Deze gids is geen vervanging voor professioneel juridisch advies.