Contrastchecker (Contrast Checker)
Controleer de WCAG-contrastverhouding tussen tekst- en achtergrondkleur, met AA- en AAA-resultaten (geslaagd/niet geslaagd) en een live voorbeeld.
🔒 Draait volledig in uw browser — niets wordt geüploadControleer het tekstcontrast voordat je publiceert
Goed kleurcontrast is een van de eenvoudigste manieren om een website leesbaarder te maken. Deze contrastchecker vergelijkt een tekstkleur en een achtergrondkleur met de WCAG-formule voor relatieve luminantie en toont daarna de contrastverhouding en de resultaten geslaagd/niet geslaagd voor AA en AAA. Hij is handig voor knoppen, navigatie, badges, kaarten, waarschuwingen en overal waar tekst op een gekleurd vlak staat.
De berekening draait in je browser en vereist geen upload. Kies twee kleuren, wissel ze indien nodig om en gebruik het voorbeeldblok om te zien hoe een echte tekst overkomt. De verhouding is objectief, maar het voorbeeld blijft belangrijk, omdat letterdikte, lettergrootte en de omliggende opmaak de leesbaarheid beïnvloeden. Een combinatie die technisch slaagt, kan toch vermoeiend zijn als de tekst klein is of het vlak visueel druk is.
AA- en AAA-resultaten begrijpen
WCAG AA is het gangbare doel voor de meeste websites en producten. Normale tekst moet minimaal 4,5:1 halen, grote tekst minimaal 3:1. AAA is strenger: 7:1 voor normale tekst en 4,5:1 voor grote tekst. Grote tekst betekent 18pt normaal of 14pt vet en groter. De lagere drempel bestaat omdat grotere, dikkere letters bij lager contrast nog steeds beter te onderscheiden zijn dan kleine lopende tekst. Weet je niet zeker welke categorie geldt, behandel de tekst dan als normaal en ga voor de hogere eis.
Toegankelijke kleursystemen ontwerpen
Controleer het contrast vroeg, niet pas wanneer het visuele ontwerp klaar is. Test merkkleuren bij het kiezen op de vlakken waar ze echt verschijnen: witte kaarten, donkere navigatiebalken, gedempte achtergronden en uitgeschakelde statussen. Documenteer toegankelijke combinaties als tokens, zodat teams ze niet opnieuw hoeven te ontdekken. Onthoud dat contrast slechts één onderdeel van toegankelijkheid is. Gebruik zichtbare focusranden, duidelijke labels, semantische HTML en vertrouw niet alleen op kleur om belangrijke statussen zoals fouten, succes en waarschuwingen over te brengen.
Hoe te gebruiken
- Kies kleurenKies de tekstkleur en de achtergrondkleur die je wilt testen.
- Lees de verhoudingBekijk de WCAG-contrastverhouding en de resultaten geslaagd/niet geslaagd voor normale en grote tekst.
- Bekijk een voorbeeldGebruik het voorbeeldblok om te beoordelen hoe de combinatie in een echte leescontext overkomt.