Contrastcheck

Zo werkt het

1. Kies de kleur van je tekst. Gebruik de kleurkiezer, of typ de kleurcode, zoals #111226.
2. Kies de kleur van de achtergrond op dezelfde manier.
3. Lees het contrast. Hoe hoger het getal, hoe beter de tekst opvalt. 1:1 betekent: geen verschil. 21:1 is het hoogste: zwart op wit.
4. Kijk bij elke regel of je kleuren voldoen. Voldoet je tekstkleur niet? Dan zie je een kleur die erop lijkt en wel voldoet.
5. Wil je de uitkomst bewaren of laten zien? Druk op ‘Print de uitkomst’. Alleen de uitkomst komt op papier.

Met ‘Wissel om’ zet je de tekstkleur op de achtergrond en andersom. Het contrast blijft dan hetzelfde.

Wat de regels vragen

WCAG is de internationale standaard voor toegankelijke websites en apps. Lees meer in wat is WCAG. Over contrast gaan drie eisen:

• 1.4.3, niveau AA. Normale tekst heeft een contrast van minstens 4,5:1. Grote tekst minstens 3:1.
• 1.4.11, niveau AA. Wat je nodig hebt om iets te zien of te bedienen, heeft minstens 3:1 tegen de kleur ernaast. Denk aan de rand van een invulveld, een icoon of een lijn in een grafiek.
• 1.4.6, niveau AAA. Normale tekst minstens 7:1, grote tekst minstens 4,5:1.

Niveau AA is de gewone norm. AAA is strenger. Grote tekst is tekst van minstens 18 punt, of 14 punt als hij vet is. Op een scherm is dat ongeveer 24 pixels, of ongeveer 18,5 pixels vet.

Contrast is één van de eisen om informatie voor iedereen zichtbaar te maken. Lees ook Waarneembaar: niemand mist informatie.

Goed om te weten

• We ronden niet af. Is het contrast 4,499:1, dan voldoet het niet aan 4,5:1. Het getal op je scherm is daarom naar beneden afgekapt: je ziet 4,49:1.
• Logo’s en tekst die alleen versiering is, hoeven niet aan deze eisen te voldoen. Een knop die uit staat, ook niet.
• Kleur alleen is nooit genoeg om iets duidelijk te maken. Laat een link of een fout ook zien met een streep, een woord of een icoon. Dat is een aparte eis (1.4.1).
• Staat je tekst op een foto of op een kleurverloop? Check dan de plek waar de achtergrond het meest op je tekstkleur lijkt.
• Een doorzichtige kleur kun je hier niet invullen. Gebruik de kleur zoals je hem op het scherm ziet, samen met wat eronder ligt.

Zelf uitrekenen

Zo rekent de check. Met een rekenmachine kun je het ook zelf doen, op papier:

1. Schrijf de kleurcode als drie getallen van 0 tot 255: rood, groen en blauw. Elk paar tekens is één getal. De letters a tot en met f zijn 10 tot en met 15. Neem het eerste teken keer 16 en tel het tweede erbij op. Bij #1a2b3c is rood: 1 × 16 + 10 = 26.
2. Deel elk getal door 255. Is de uitkomst 0,04045 of lager? Deel hem dan door 12,92. Is hij hoger? Tel er 0,055 bij op, deel door 1,055 en neem de uitkomst tot de macht 2,4.
3. Reken de helderheid uit: 0,2126 × rood + 0,7152 × groen + 0,0722 × blauw. Je krijgt een getal van 0 (zwart) tot 1 (wit).
4. Doe hetzelfde voor de andere kleur.
5. Het contrast is: de hoogste helderheid plus 0,05, gedeeld door de laagste helderheid plus 0,05. Zwart op wit geeft (1 + 0,05) / (0 + 0,05) = 21, dus 21:1.

Je kleuren

Je kleuren blijven op je eigen apparaat. De check gebeurt in je browser: we versturen niets en we bewaren niets. Sluit je de pagina, dan staan de kleuren weer zoals eerst.

Bronnen

De eisen en de formule komen van W3C, de organisatie achter WCAG. Gelezen op 28 september 2026.

• Web Content Accessibility Guidelines (WCAG) 2.2 (externe website)
• Understanding Success Criterion 1.4.3: Contrast (Minimum) (externe website)
• Understanding Success Criterion 1.4.6: Contrast (Enhanced) (externe website)
• Understanding Success Criterion 1.4.11: Non-text Contrast (externe website)
• Understanding Success Criterion 1.4.1: Use of Color (externe website)