Kleurcontrast checker — voldoet je kleurencombinatie aan de WCAG?
Onvoldoende kleurcontrast is een van de meest voorkomende toegankelijkheidsproblemen op websites. Tekst die te weinig contrasteert met de achtergrond is moeilijk leesbaar voor mensen met een visuele beperking — maar ook voor iedereen die een scherm in de zon gebruikt.
Met deze gratis kleurcontrast checker controleer je direct of je kleurencombinatie voldoet aan de WCAG-richtlijnen.
Hoe werkt de kleurcontrast checker?
Vul een voorgrondkleur (tekst) en een achtergrondkleur in. De tool berekent de contrastverhouding en laat zien of je combinatie voldoet aan WCAG niveau AA en AAA — voor normale tekst, grote tekst en UI-componenten.
Controleer of je kleurencombinatie voldoet aan de WCAG-richtlijnen. Vul twee kleuren in en zie direct of het contrast voldoende is — en voor welke situaties.
Niveau AA
Niveau AAA
Welke eis geldt wanneer?
Tekst en afbeeldingen van tekst moeten een contrastverhouding van minstens 4.5:1 hebben.
Grote tekst (18pt / 24px of groter, of 14pt / 18.66px vet) mag een lagere verhouding van 3:1 hebben.
Dit criterium geldt niet voor logo's, merknamen of decoratieve tekst.
UI-componenten (knoppen, formuliervelden, iconen) en grafische objecten die nodig zijn om de content te begrijpen
moeten een contrastverhouding van minstens 3:1 hebben ten opzichte van aangrenzende kleuren.
Denk aan de rand van een invoerveld, de kleur van een icoon, of de staat van een schakelaar.
Tekst moet een contrastverhouding van minstens 7:1 hebben. Grote tekst: 4.5:1.
Dit is het hoogste niveau en is niet wettelijk verplicht, maar wordt wel aanbevolen voor
optimale leesbaarheid — bijvoorbeeld voor langere teksten of een ouder publiek.
Overzicht drempelwaarden
| Wat | AA (verplicht) | AAA (aanbevolen) |
|---|---|---|
| Normale tekst (< 18pt) | 4.5:1 | 7:1 |
| Grote tekst (≥ 18pt / ≥ 14pt vet) | 3:1 | 4.5:1 |
| UI-componenten & iconen | 3:1 | — |
Kleurcontrast is slechts een van de 55 WCAG-succescriteria. Wil je weten of je hele website voldoet aan de toegankelijkheidseisen?
Vraag een audit aan of bel 085 5055 890.
Veelgestelde vragen
Wat is kleurcontrast?
Kleurcontrast is het verschil in helderheid tussen twee kleuren. Hoe groter het verschil, hoe beter de leesbaarheid. Zwarte tekst op een witte achtergrond heeft het maximale contrast van 21:1. Witte tekst op een lichtgrijze achtergrond kan een contrast van 1.5:1 hebben — veel te laag om te lezen.
Waarom is kleurcontrast belangrijk voor toegankelijkheid?
Ongeveer 300 miljoen mensen wereldwijd hebben een vorm van kleurenblindheid. Daarnaast neemt het gezichtsvermogen af met de leeftijd. Onvoldoende contrast sluit deze groepen uit. WCAG succescriterium 1.4.3 (Contrast minimum) is daarom verplicht op niveau AA.
Wat is het verschil tussen niveau AA en AAA?
Niveau AA is de wettelijke eis: een contrastverhouding van 4.5:1 voor normale tekst. Niveau AAA gaat verder met 7:1 — dit is niet verplicht, maar wordt aanbevolen voor langere teksten en websites voor een ouder publiek.
Geldt contrast ook voor afbeeldingen en iconen?
Ja. Sinds WCAG 2.1 geldt succescriterium 1.4.11 (Contrast van niet-tekstuele content). UI-componenten zoals knoppen, formuliervelden en iconen moeten een contrastverhouding van minimaal 3:1 hebben.
Mijn ontwerper zegt dat het er "minder mooi uitziet" met meer contrast. Wat nu?
Dit horen we vaak. Maar er zijn genoeg kleurencombinaties die zowel mooi als toegankelijk zijn. Het is een kwestie van de juiste tinten kiezen — niet van concessies doen aan het ontwerp.
Wil je weten hoe je hele website scoort op contrast en alle andere WCAG-criteria? Vraag een audit aan of begin met een quickscan voor een eerste overzicht.