Contrastcontrole
Controleer kleurcontrast voor WCAG
Hoe Contrastcontrole te gebruiken
Controleer kleurcontrast voor WCAG Gratis online tool, geen registratie, geen opdringerige advertenties. Gebruik het nu.
Waarom is kleurcontrast belangrijk?
Ongeveer 8% van de mannen en 0,5% van de vrouwen heeft een vorm van kleurenzwakte. Bovendien lezen mensen in moeilijke omstandigheden — fel zonlicht, slechte schermen, vermoeidheid of verouderende ogen. Voldoende kleurcontrast zorgt ervoor dat je inhoud leesbaar is voor alle gebruikers, ongeacht hun visuele omstandigheden.
- Naleving van webtoegankelijkheid: De WCAG 2.1 (Web Content Accessibility Guidelines) definiëren minimale contrastverhoudingen. In Nederland verplicht het Besluit digitale toegankelijkheid overheid webtoegankelijkheid voor overheidsorganisaties — een wettelijke verplichting, geen aanbeveling. Ook de Europese toegankelijkheidsrichtlijn (EAA) breidt dit uit naar meer sectoren.
- Ontwerpcontrole: Controleer tekst/achtergrond kleurencombinaties tijdens de ontwerpfase, vóór de ontwikkeling. Het is veel goedkoper om contrastproblemen in Figma te corrigeren dan na de lancering van de site.
- Componentbibliotheken: Zorg ervoor dat elke kleurencombinatie in je ontwerpsysteem voldoet aan de toegankelijkheidsvereisten in alle gebruikscontexten.
- Donkere modus: Bij het implementeren van de donkere modus falen kleuren die werkten op lichte achtergronden vaak op donkere achtergronden. Elke modus heeft onafhankelijke en uitgebreide contrastcontrole nodig.
- Datavisualisatie: Zorg ervoor dat grafiekkleuren te onderscheiden zijn door gebruikers met kleurenzwakte en leesbaar zijn op verschillende achtergrondkleuren — belangrijk voor dashboards en zakelijke rapporten.
WCAG-niveaus: Niveau A is het absolute minimum. Niveau AA (verhouding ≥ 4,5:1 voor normale tekst, ≥ 3:1 voor grote tekst) is de wettelijke standaard in de meeste jurisdicties en het doelniveau voor de meeste websites. Niveau AAA (verhouding ≥ 7:1) is voor maximale toegankelijkheid.
Frequently Asked Questions
Welke contrastverhouding vereist WCAG AA?
WCAG AA vereist een minimale contrastverhouding van 4,5:1 voor normale tekst (kleiner dan 18pt of 14pt vet) en 3:1 voor grote tekst (18pt of meer, of 14pt vet of meer). UI-componenten en grafische elementen (pictogrammen, formulierranden) vereisen 3:1. Dit zijn minima — hoger contrast is altijd beter voor algemene leesbaarheid.
Hoe wordt de contrastverhouding berekend?
Contrastverhouding = (L1 + 0,05) / (L2 + 0,05), waarbij L1 de relatieve luminantie van de lichtste kleur is en L2 die van de donkerste. Luminantie wordt berekend uit lineaire RGB-waarden volgens een specifieke formule. Het maximale contrast is 21:1 (zwart op wit). Een verhouding van 1:1 betekent geen contrast — identieke kleuren.
Is de contrastverhouding van toepassing op gekleurde tekst op gekleurde achtergrond?
Ja — de WCAG-formule vergelijkt de relatieve luminantie, niet alleen de waargenomen helderheid. Rode tekst op een groene achtergrond kan een lage contrastverhouding hebben, ook al zijn beide kleuren levendig. Test altijd werkelijke kleurencombinaties — vertrouw niet op visuele intuïtie omdat waargenomen luminantie misleidend kan zijn.
Wat is het verschil tussen kleurcontrast en kleurenblindheid?
De contrastverhouding meet luminantieverschillen — dit beïnvloedt alle gebruikers, inclusief die met een normale kleurvisie (met name bij veel licht of op slechte schermen). Kleurenblindheid beïnvloedt hoe kleuren worden onderscheiden, niet noodzakelijk hun luminantie. Een hoog-contrast ontwerp dat alleen rood en groen gebruikt, haalt de luminantietest maar kan ononderscheidbaar zijn voor kleurenblinde gebruikers.
Beïnvloedt de letterdikte de contrastvereisten?
Ja. Vetgedrukte tekst en grote tekst hebben lagere minimumvereisten omdat ze inherent gemakkelijker te lezen zijn. WCAG AA vereist 3:1 voor tekst van 18pt (24px) of meer, of 14pt (ongeveer 18,67px) vet. Voor kleinere of niet-vetgedrukte tekst is de vereiste 4,5:1.
Contrastcontrole vs kleurenblindheidsimulator vs toegankelijkheidsaudit
Een contrastcontrole controleert de luminantieverhouding tussen twee specifieke kleuren. Een kleurenblindheidsimulator (Coblis, Chrome DevTools) toont hoe een ontwerp eruitziet met de verschillende typen kleurvisiegebrek. Een volledige toegankelijkheidsaudit (axe, Lighthouse, WAVE) scant een volledige pagina op alle WCAG-overtredingen. Voor volledige toegankelijkheid: controleer contrast tijdens de ontwerpfase, simuleer kleurenblindheid vóór lancering en voer geautomatiseerde audits uit op de productiesite.