WCAG Contrast Testen voor Beide Thema’s
Leer welke tools je moet gebruiken om contrast te meten en zorg dat je Nederlands content altijd leesbaar blijft in licht en donker mode.
Waarom Contrast Testen Essentieel Is
Je hebt een prachtig donker thema ontworpen met CSS custom properties, maar hoe weet je of het echt leesbaar is? Veel developers gokken — en dat leidt tot problemen. Een lila tekst op een donkere paarse achtergrond ziet er misschien mooi uit in het design, maar gebruikers met visuele beperking kunnen het niet lezen.
De WCAG 2.1 standaard definieert exact hoeveel contrast je nodig hebt. Voor normale tekst geldt: minimaal 4.5:1 ratio voor AA-niveau. Voor grote tekst kun je met 3:1 wegkomen. Maar je moet dit testen — in BEIDE thema’s. Een kleur die goed contrast heeft in het licht thema kan volledig falen in het donker.
De Basis
WCAG AA: 4.5:1 voor normale tekst, 3:1 voor grote tekst. AAA (aanbevolen): 7:1 en 4.5:1. Dit moet je testen voor elke kleurcombinatie in beide thema’s.
Welke Tools Moet Je Gebruiken?
Er zijn verschillende tools beschikbaar, elk met hun eigen voordelen. WebAIM Contrast Checker is eenvoudig — je voert twee kleuren in en je krijgt direct de ratio. Handig voor snelle checks, maar je kunt niet zien hoe het eruit ziet op je echte website.
Voor serieus werk gebruiken we de DevTools in Chrome of Firefox. Open je website, inspecteer een element, en klik op de kleurwaarde in de CSS. Je ziet direct de contrast ratio en of het AA/AAA haalt. Het voordeel? Je test het in context. Je ziet exact hoe die lila knop eruit ziet op jouw achtergrond.
Axe DevTools en Lighthouse gaan nog verder. Ze scannen je hele pagina en rapporteren alle contrastproblemen in één keer. Ideal voor grote projecten waar je niet handmatig alles kunt checken.
Beide Thema’s Testen: De Praktijk
Dit is cruciaal: je kunt niet zeggen “we’ve tested contrast” als je het alleen in het licht thema hebt gedaan. Je CSS custom properties bepalen de kleuren in beide modi. Dus je moet beide testen.
Start met je donker thema. Open DevTools, zet je website in dark mode (meestal via een toggle of system preference), en controleer elke tekstkleur tegen haar achtergrond. Noteer welke combinaties falen. Dan switch je naar light mode en doet hetzelfde.
Het meest voorkomende probleem? Een grijze tekst die in het donker thema 4.8:1 contrast heeft, maar in het licht thema maar 2.3:1. De ratio werkt beide kanten op — het kan prima zijn in het ene en falen in het andere.
Stap-voor-Stap Testproces
Inventariseer je kleurcombinaties
Maak een lijst van alle tekst-op-achtergrond combinaties in je design. Niet alleen h1, h2, p — ook buttons, links, labels, tooltips. Elk element met tekst moet getest worden.
Test in DevTools voor beide thema’s
Open je live website (of dev server) in Chrome. Inspecteer elk tekstlement. Controleer de contrast ratio die DevTools toont. Doe dit voor licht en donker mode afzonderlijk.
Documenteer wat faalt
Schrijf op welke kleurcombinaties niet aan WCAG AA voldoen. Bijvoorbeeld: “Paarse link (#c084fc) op donkere achtergrond (#1e1b4b) = 2.1:1 — FAALT”. Dit helpt bij prioriteiten.
Pas je CSS custom properties aan
Jij werkt met variabelen, dus je past ze in je root aan. Misschien moet je –text-muted lichter maken, of –accent-color donkerder. Test opnieuw na elke aanpassing.
Gebruik Lighthouse als eindcheck
Draai Lighthouse in DevTools. Het rapporteert alle accessibility issues, inclusief contrastproblemen. Dit is je eindvalidatie dat alles in orde is.
Praktische Tips die Echt Werken
We’ve learned a lot from testing dozens of Dutch websites. Hier zijn de dingen die het verschil maken:
Ga niet te subtiel
Veel designers willen “subtle” grijs voor secundaire tekst. Maar grijs is gevaarlijk. #999999 op wit? Dat faalt. #666666 is beter, maar nog steeds riskant. Wanneer twijfel je, kies je donkerder.
Variabelen helpen
Als je –text-muted-dark en –text-muted-light gebruikt in plaats van één grijstint, heb je meer controle. Je kunt ze afzonderlijk optimaliseren voor elk thema.
Test met echte ogen
DevTools geeft je de ratio, maar vraag een collega om naar je site te kijken. Echte gebruikers met verschillende visuele capaciteiten kunnen problemen zien die tools missen.
Vergeet mobiel niet
Mobiele schermen hebben andere helderheid en contrast karakteristieken. Testen op je desktop betekent niet dat het op een iPhone goed is. Controleer altijd op echt hardware.
Conclusion: Het Hoort Erbij
Contrast testen is niet een extra. Het’s een onderdeel van het bouwproces, niet iets dat je aan het einde toevoegt. Als je aan dual-theme design werkt met CSS custom properties, moet je contrastvalidatie in je workflow opnemen.
De goede nieuws? Met tools als DevTools, WebAIM, en Lighthouse is het niet moeilijk. Je kunt in een paar minuten checken of je kleuren voldoen. En je hoeft niet naar externe services — veel tools zijn al in je browser ingebouwd.
Start vandaag. Open je website in beide thema’s. Pak DevTools erbij. Controleer vijf elementen. Je zult waarschijnlijk iets vinden dat je wilt aanpassen. Dat’s normaal — dit is hoe je een echt toegankelijke website bouwt.
Disclaimer
Dit artikel biedt educatieve informatie over WCAG contrast testen en best practices voor dual-theme webdesign. De informatie is gebaseerd op WCAG 2.1 richtlijnen en gemeenschappelijke industrie praktijken. Tools en versies kunnen veranderen; zorg altijd dat je de meest recente WCAG richtlijnen raadpleegt op wcag.nl en het W3C voor juridische en conformiteitsadviezen. Dit artikel geeft geen juridisch advies — raadpleeg een accessibility expert voor projectspecifieke vragen.