WCAG contrast checker

Waarom contrast belangrijk is

Contrast is het verschil in helderheid tussen tekst en achtergrond. Te weinig contrast en je tekst wordt onleesbaar: in de zon op een telefoon, op een goedkoop scherm, voor iemand met een lichte visuele beperking of simpelweg voor iedereen boven de 45. Dat is geen randgeval. Ongeveer 1 op de 12 mannen heeft een vorm van kleurenblindheid en bijna iedereen leest ooit een pagina buiten in fel licht.

Voor jou als eigenaar van een site betekent slecht contrast twee dingen: bezoekers lezen je aanbod niet, en formulieren en knoppen worden overgeslagen. Wij zien in conversieonderzoek regelmatig dat een te licht grijze labeltekst of een knop met net te weinig contrast letterlijk aanvragen kost. Test je kleuren hierboven in de checker en je ziet direct waar je staat.

Wat WCAG precies eist

WCAG (Web Content Accessibility Guidelines) is de internationale standaard. Voor contrast gelden op niveau AA deze grenzen:

De ratio loopt van 1:1 (identiek, onzichtbaar) tot 21:1 (zwart op wit). AA is de norm waar wetgeving en opdrachtgevers naar verwijzen. AAA is strenger en meestal alleen verplicht voor overheidsdiensten of doelgroepen met veel visuele beperkingen.

Voor welke sites is dit wettelijk verplicht

Toegankelijkheid is in Europa geen vrijblijvend advies meer.

• Overheid en semipublieke organisaties vallen in Nederland onder het Tijdelijk besluit digitale toegankelijkheid: WCAG 2.1 niveau AA, met een verplichte toegankelijkheidsverklaring.
• Bedrijven met een webshop of digitale dienst vallen sinds 28 juni 2025 onder de European Accessibility Act (in Nederland de Implementatiewet toegankelijkheidsvoorschriften producten en diensten). Denk aan e-commerce, bankieren, vervoer, e-books en telecom.
• Micro-ondernemingen (minder dan 10 medewerkers én minder dan 2 miljoen euro omzet) die diensten leveren zijn uitgezonderd, maar je klanten en inkopers vragen er wel naar.
• B2B-leveranciers krijgen de eis via tenders en inkoopvoorwaarden: grote opdrachtgevers eisen WCAG AA van hun leveranciers.

Kort door de bocht: lever je online een dienst aan consumenten, of werk je voor de overheid, dan is contrast geen designvoorkeur maar een eis. Meer achtergrond staat in ons artikel over WCAG-wetgeving.

Hoe je de checker gebruikt

1. Vul de tekstkleur en achtergrondkleur in als hexcode, of kies ze met de kleurenkiezer.
2. Heb je alleen een screenshot of een ontwerp? Upload de afbeelding en klik erin om een kleur te pakken. Zet eerst met de schakelaar of je de tekst- of achtergrondkleur vult.
3. Lees de ratio en de badges: per tekstgrootte en per niveau zie je of het voldoet.
4. Haal je AA niet? Klik op "Overnemen" bij het voorstel. We schuiven je tekstkleur zo min mogelijk op tot 4,5:1 gehaald wordt, zodat je merkkleur zoveel mogelijk intact blijft.

Veelgemaakte fouten

• Grijs op wit. #999999 op wit haalt maar 2,8:1. Populair in designs, kansloos voor WCAG.
• Tekst over een foto. De ratio verandert per pixel. Gebruik een overlay of een tekstvlak met vaste achtergrondkleur.
• Placeholder als label. Placeholders zijn vaak licht grijs én verdwijnen bij het typen. Gebruik een echt label.
• Merkkleur als tekstkleur. Veel merkkleuren (geel, lichtblauw, mintgroen) werken prima als vlak, niet als tekst. Gebruik ze als achtergrond met donkere tekst erop.
• Disabled states en foutmeldingen vergeten. Een rode foutmelding van 3:1 leest niemand.
• Alleen kleur gebruiken om iets aan te geven. Voeg een icoon of tekst toe naast rood of groen.

Contrast is één onderdeel van toegankelijkheid

Een goede contrastscore betekent niet dat je site toegankelijk is. Denk ook aan focusstates die zichtbaar zijn bij toetsenbordnavigatie, alt-teksten, een logische koppenstructuur, formulierlabels, voldoende grote aanraakvlakken en een site die werkt op 200% zoom. Contrast is wel het snelst te controleren en het vaakst fout.

Wil je weten hoe je site er technisch voor staat, dan is een snelle websitescan een goed startpunt, en met PageSpeed Insights kijk je naar snelheid en Core Web Vitals.

Hoe wij hiermee helpen

Wij bouwen sites en webshops waarin toegankelijkheid in het designsysteem zit, niet als reparatie achteraf. In de praktijk betekent dat: kleurtokens die per combinatie getest zijn, componenten met vaste tekst-op-achtergrond-paren en een controle in de oplevering. Loop je tegen een audit, een tender of een klacht aan, dan kijken we mee naar wat er nodig is en wat het kost.

Wil je erover sparren? Plan een adviesgesprek of stuur ons een bericht via de contactpagina.