WCAG-contrastcontrole
Controleer of twee kleuren voldoen aan de WCAG AA en AAA contrastvereisten.
Snel antwoord: WCAG-contrastcontrole: controleer of twee kleuren voldoen aan de WCAG-contrastvereisten voor AA en AAA. Werkt volledig in je browser, gratis en zonder registratie.
Laatst bijgewerkt
Goed om te weten
Contrast is measured as a ratio between the relative luminance of two colors, running from 1:1 (identical) to 21:1 (pure black on pure white). The WCAG 2.1 thresholds this tool reports are the accessibility bar most sites are held to: 4.5:1 for normal body text and 3:1 for large text at Level AA, tightening to 7:1 and 4.5:1 at the stricter Level AAA. "Large" here means roughly 18pt, or 14pt bold.
The formula is based on perceived luminance, not on how different two colors look, which produces some counterintuitive results. Two vivid but similarly bright colors — say a saturated red on a saturated green — can have poor contrast even though they clash violently to the eye, while a light gray on white may pass more easily than you expect. That is why relying on your own judgment is unreliable and a numeric check is worth the two seconds it takes.
One limitation to plan around: WCAG contrast is only defined for opaque colors. If your foreground uses transparency, the effective color depends on whatever sits behind it, so pre-blend it against the actual solid background before checking. Since luminance ignores hue entirely, a passing ratio does not guarantee a design is color-blind-friendly — confirm that separately with the color blindness simulator, and grab exact values with the color picker.
Veelgestelde vragen
- Is de contrastchecker gratis?
- Ja — gratis, zonder registratie of limieten.
- Welke formule gebruik je?
- De officiële WCAG 2.1 relatieve helderheid formule — dezelfde als die Google’s Lighthouse gebruikt.
- Welke verhoudingen slagen?
- AA heeft 4.5:1 nodig voor normale tekst of 3:1 voor grote tekst; AAA verhoogt dat naar 7:1 en 4.5:1.
- Kan ik transparante kleuren controleren?
- WCAG definieert geen verhoudingen voor transparante foregrounds — meng je kleur eerst met een vaste achtergrond.
- Worden gegevens geüpload?
- Nee — de controle draait in je browser.