WCAG-contrastchecker
Test de toegankelijkheid van je tekst-/achtergrondkleuren.
- Direct
- Gratis
- Privé (lokaal verwerkt)
- Zonder registratie
Kleuren die iedereen kan lezen, gecheckt in twee klikken
Bijna één op de twaalf mensen neemt sommige contrasten slecht waar. De WCAG (Web Content Accessibility Guidelines) stellen minimumverhoudingen tussen tekst en achtergrond vast; deze checker berekent ze live, met de officiële formule voor relatieve luminantie, en toont een echt voorbeeld van je combinatie.
-
Kies je twee kleuren
Met de kiezer of door een hexcode te plakken (#rrggbb of #rgb).
-
Lees de verhouding
Van 1:1 tot 21:1, met de vier AA/AAA-oordelen voor normale en grote tekst.
-
Pas aan indien nodig
Verander de lichtheid van een van de kleuren tot het slaagt, geholpen door het voorbeeld.
De WCAG-drempels in één tabel
| Niveau | Normale tekst | Grote tekst |
|---|---|---|
| AA (minimum) | 4,5 : 1 | 3 : 1 |
| AAA (versterkt) | 7 : 1 | 4,5 : 1 |
| UI-componenten (2.1) | 3 : 1 | 3 : 1 |
Contrast moet voor elk tekst/achtergrond-paar van je interface worden gecontroleerd — denk aan toestanden: gehoverde links, uitgeschakelde knoppen, placeholders en donkere modus.
Veelgestelde vragen
Wat is de contrastverhouding?
De verhouding tussen de luminantie van de lichtere en de donkerdere kleur, van 1:1 (identiek) tot 21:1 (zwart op wit). WCAG gebruikt die om de leesbaarheid van tekst voor iedereen te garanderen, ook voor slechtzienden.
Welke drempels moet ik halen?
Niveau AA: 4,5:1 voor normale tekst, 3:1 voor grote tekst. Niveau AAA, strenger: respectievelijk 7:1 en 4,5:1. AA is in veel landen het wettelijke minimum voor publieke diensten.
Wat telt als “grote tekst”?
Volgens WCAG: minstens 18 pt (24 px) in normaal gewicht, of 14 pt (18,5 px) vet. Grote koppen verdragen dus minder contrast dan lopende tekst.
Geldt contrast ook voor niet-tekstuele elementen?
Ja: sinds WCAG 2.1 moeten interfacecomponenten (veldranden, informatieve iconen, focustoestanden) 3:1 halen ten opzichte van aangrenzende kleuren (criterium 1.4.11).
Mijn verhouding is te laag: hoe los ik dat op?
Maak de tekst donkerder of de achtergrond lichter (of andersom in een donker thema). Vaak volstaan enkele lichtheidsstappen — houd dezelfde tint en speel met de lichtheid om je palet te behouden.