WCAG contrast checker voor kleurcontrast
Deze gratis WCAG contrast checker toont direct de contrastverhouding tussen je voorgrond- en achtergrondkleur. De tool toetst je kleurcombinatie meteen aan de WCAG 2.1 AA- en AAA-drempels voor zowel normale als grote tekst. Alles draait volledig lokaal in je browser, zonder dat er gegevens naar een server worden gestuurd.
Hoe werkt de WCAG contrast checker?
Met deze online Kleurcontrastchecker controleer je stapsgewijs of jouw kleurcombinaties aan de WCAG-richtlijnen voldoen.
- Voer een hex-code van 3 of 6 tekens in voor de voorgrondkleur of open de kleurkiezer van je apparaat.
- Voer de hex-code of kleur in voor de achtergrondkleur.
- Bekijk direct de berekende verhouding, de live tekstweergave en alle vier de statusbadges.
- Gebruik de knop Kleuren wisselen om tekst- en achtergrondkleur direct om te draaien.
WCAG 2.1 AA- en AAA-normen voor tekst
De WCAG 2.1-richtlijnen kennen twee niveaus voor kleurcontrast: niveau AA en het strengere niveau AAA. Beide niveaus maken onderscheid tussen normale en grote tekst.
- Niveau AA: vereist een verhouding van minimaal 4,5:1 voor normale tekst en 3,0:1 voor grote tekst.
- Niveau AAA: vereist een verhouding van minimaal 7,0:1 voor normale tekst en 4,5:1 voor grote tekst.
Tekst geldt als grote tekst bij minimaal 18pt (24px) bij een normaal gewicht, of minimaal 14pt (18,66px) bij een vet lettertype.
Kleurcontrast checken met hex-codes
Je kunt eenvoudig hex-codes kopiëren uit je ontwerpprogramma of CSS-bestand en in het invoerveld plakken. Het systeem accepteert hexadecimale codes van exact 3 of 6 tekens (0–9, A–F).
Een voorvoegsel zoals # of extra tekens worden automatisch genegeerd. Zodra een geldige code is ingevoerd, geeft de status Voldoet aan welk niveau je combinatie behaalt.
Voorbeeld van een verhouding
Wanneer je de hex-code #767676 gebruikt voor tekst op een achtergrond van #FFFFFF, is de berekende verhouding exact 4,54:1.
Deze combinatie behaalt de status Voldoet voor AA Normale tekst, AA Grote tekst en AAA Grote tekst, maar niet aan AAA Normale tekst.
Veelgestelde vragen
Wat is de minimale contrastverhouding voor WCAG AA?
Voor WCAG 2.1 niveau AA is een minimale contrastverhouding van 4,5:1 vereist voor normale tekst en 3,0:1 voor grote tekst. De tool toont beide drempels direct op het scherm.
Wat is een goede contrastverhouding voor tekst op een website?
Een verhouding van 4,5:1 of hoger is de standaard voor normale tekst en voldoet aan de WCAG 2.1 AA-norm. Voor maximale leesbaarheid kun je streven naar 7,0:1 of hoger voor niveau AAA.
Wanneer geldt een tekst als grote tekst volgens de WCAG?
Tekst geldt als grote tekst als deze minimaal 18pt (24px) is bij een normaal gewicht, of minimaal 14pt (18,66px) bij een vet lettertype. Voor grote tekst geldt een lagere drempelwaarde van 3,0:1 voor AA.
Is deze WCAG contrast checker gratis te gebruiken?
Ja, deze tool is volledig gratis te gebruiken zonder account of limieten. De berekening draait volledig in je eigen browser op basis van de officiële W3C-formule voor relatieve luminantie.
Kan ik de contrastverhouding controleren met hex-codes?
Ja, je kunt direct een hex-code van 3 of 6 tekens invoeren in het veld voor de voorgrond- of achtergrondkleur. De verhouding en badges worden meteen bijgewerkt zodra de code geldig is.
Wat is de WCAG AA-contrastverhouding voor normale tekst?
De minimale verhouding voor normale tekst op niveau AA is 4,5:1. Voor grote tekst geldt een verhouding van 3,0:1.
Kan ik voorgrond- en achtergrondkleur direct omwisselen?
Ja, met de knop "Kleuren wisselen" kun je de tekst- en achtergrondkleur direct met elkaar omruilen om te zien hoe de combinatie er andersom uitziet.
Werkt de controleur met de ingebouwde kleurkiezer van mijn apparaat?
Ja, als je op het kleurvakje tikt of klikt, opent de ingebouwde kleurkiezer van je apparaat. De tekstinvoer en het kleurvakje blijven altijd synchroon.
Aanbevolen
-
Interaction of Color (Josef Albers)De klassieker over hoe een kleur verandert afhankelijk van de achtergrond waarop je hem plaatst.
-
Don't Make Me Think, Revisited (Steve Krug)Goed leesbare kleuren zijn stap één; dit boek behandelt de rest van een gebruiksvriendelijke site.
-
Nix Mini 3 kleurensensorScan een fysiek monster van verf of stof naar de exacte hex-code en test hem hier direct.
Help de tools gratis te houden. ✨
Afbeeldingen dienen ter illustratie. Als Amazon-Partner verdien ik aan in aanmerking komende aankopen.
