Wat is CSS Kleurcontrast Checker?
De WCAG-contrastverhouding meet het luminantieverschil tussen twee kleuren. Een verhouding van 4,5:1 voldoet aan de AA-norm voor normale tekst en 7:1 voldoet aan AAA. Deze drempelwaarden helpen ervoor te zorgen dat mensen met slecht zicht, kleurenblindheid of die op een scherm lezen bij moeilijke verlichting de inhoud nog kunnen lezen. Deze tool berekent de precieze verhouding op basis van de hex-waarden die u invoert en toont of de combinatie het gewenste niveau haalt, zodat ontwerpers en ontwikkelaars kleurcombinaties kunnen controleren voor publicatie.
Snel antwoord
Controleer of twee kleurcombinaties voldoen aan WCAG-contrastnormen voor publicatie. De tool berekent de precieze verhouding en vertelt u of normale tekst, grote tekst en UI-componenten AA- of AAA-niveaus halen.
Last updated: 2026-06-11
Beperkingen
- De kleurkiezer retourneert alleen hex-waarden. Het ondersteunt geen RGB-, HSL- of benoemde kleurinvoer direct.
- De tool controleert effen kleurparen. Het evalueert geen contrast op verlooptekst, box-shadow-tekst of achtergrondafbeeldingen waar luminantie varieert over het element.
- Contrastverhoudingen worden berekend op basis van de door u ingevoerde kleuren. Als een kleur transparant is, geeft het resultaat niet het werkelijke zichtbare contrast tegen de onderliggende pagina-achtergrond weer.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Zo gebruik je deze tool
- Voer de voorgrondkleur in met een hex-code, RGB-waarde of kleurkiezer.
- Voer de achtergrondkleur op dezelfde manier in.
- Lees het contrastverhoudingsresultaat en de WCAG AA- en AAA-slaag-/faalindicatoren voor normale tekst en grote tekst.
- Pas een van beide kleuren aan tot de verhouding uw beoogde toegankelijkheidsniveau bereikt.
Waarvoor je het kunt gebruiken
- Controleer of body-tekst op een lichte achtergrond voldoet aan WCAG AA-leesbaarheidsnormen.
- Valideer merkkluurcombinaties voor knoppen, badges en UI-componenten.
- Bereid toegankelijke designspecificaties voor voordat deze worden overgedragen aan ontwikkeling.