AAppicLab

WCAG-kleurcontrastchecker

Kies elke twee kleuren en zie meteen of ze voldoen aan wettelijke toegankelijkheidsnormen (WCAG AA/AAA). Visualiseer hoe kleurenblinde gebruikers je palet zien en krijg fixsuggesties met één klik.

Voorbeeldcombinaties

Grote koptekst (18pt vet)

Pa's wijze lynx bezag vroom het fikse aquaduct. Normale bodytekst op 16px.

Klein bijschrift op 12px — het moeilijkst te lezen.

17.06

Contrastverhouding

AAA — Uitstekend

WCAG AAPass

Normale tekst (< 18pt / < 14pt vet)

4.5:1

WCAG AAAPass

Normale tekst (< 18pt / < 14pt vet)

7:1

WCAG AAPass

Grote tekst (≥ 18pt of ≥ 14pt vet)

3:1

WCAG AAAPass

Grote tekst (≥ 18pt of ≥ 14pt vet)

4.5:1

WCAG 2.1 vereist 4,5:1 (AA) of 7:1 (AAA) voor normale tekst, en 3:1 (AA) of 4,5:1 (AAA) voor grote tekst (≥ 18pt normaal of ≥ 14pt vet). AA is het wettelijke minimum in de meeste rechtsgebieden.

Kleurenblindheidssimulatie

Aa 123

Normaal zicht

17.1:1
Aa 123

Protanopie (roodblind)

16.8:1
Aa 123

Deuteranopie (groenblind)

17.2:1
Aa 123

Tritanopie (blauwblind)

16.9:1
Aa 123

Achromatopsie (geen kleur)

17.0:1

Simulaties gebruiken het Machado 2009-model (ernst 1.0), toegepast in lineaire sRGB. Treft ~8% van de mannen (protanopie + deuteranopie samen).

· indigo.la.ringo

De Kleurcontrastchecker test elke twee kleuren tegen de WCAG 2.1 AA- en AAA-toegankelijkheidsdrempels voor normale en grote tekst. Plak hexcodes of kies visueel; de tool geeft de exacte contrastverhouding, een geslaagd/mislukt-label per WCAG-niveau en kleurenblindheidssimulaties op basis van het Machado 2009-model voor protanopie, deuteranopie, tritanopie en achromatopsie. Als een paar zakt, klik je op Auto-fix en duwt de tool de voor- of achtergrond naar de kleinste wijziging die nodig is om te slagen — met behoud van de bedoelde tint waar dat kan. Handig voor audits van designsystemen, toegankelijkheidsreviews vóór livegang en snelle checks tijdens componentenwerk. Alle berekeningen gebeuren lokaal in je browser.

Veelgestelde vragen

Wat is een contrastverhouding en hoe wordt die berekend?
De contrastverhouding is een numerieke maat voor het luminantieverschil tussen twee kleuren, zoals gedefinieerd door WCAG 2.1. Hij loopt van 1:1 (identieke kleuren, geen contrast) tot 21:1 (puur zwart op puur wit). De formule is (L1 + 0,05) / (L2 + 0,05), waarbij L1 en L2 de relatieve luminanties zijn van respectievelijk de lichtere en de donkere kleur.
Wat is het verschil tussen WCAG AA en AAA?
WCAG AA is het wettelijke minimum voor digitale toegankelijkheid in de meeste landen — het vereist 4,5:1 contrast voor normale tekst en 3:1 voor grote tekst. WCAG AAA is de verhoogde norm en vereist 7:1 voor normale tekst en 4,5:1 voor grote tekst. Het is ideaal voor doelgroepen met slechtziendheid of leesproblemen. De meeste nalevingswetten verplichten AA; AAA is een best-practicedoel.
Wat geldt als "grote tekst" volgens WCAG?
WCAG definieert grote tekst als 18pt (24px) of groter bij normaal gewicht, of 14pt (ongeveer 18,67px) of groter bij vet gewicht. Omdat grotere tekst van nature makkelijker te lezen is bij lager contrast, hanteert WCAG een lagere drempel. Alles onder deze groottes moet voldoen aan de strengere norm van 4,5:1 (AA) of 7:1 (AAA).
Waarom tonen kleurenblindheidssimulaties andere contrastverhoudingen?
Kleurenblindheidssimulaties transformeren je kleuren via een perceptueel model (Machado 2009, ernst 1.0), toegepast in lineaire sRGB-ruimte. De resulterende gesimuleerde RGB-waarden kunnen andere relatieve luminanties hebben dan de originelen, wat de berekende contrastverhouding verandert. Een paar dat voor normaal zicht slaagt voor WCAG AA, kan tekortschieten voor protanope of deuteranope gebruikers — deze tool brengt die gaten aan het licht.
Stuurt deze tool mijn kleurgegevens ergens heen?
Nee. Elke berekening — contrastverhouding, beoordeling van het WCAG-label, kleurenblindheidssimulatie en fixsuggesties — draait volledig in je browser via JavaScript. Er worden nooit kleurwaarden verzonden naar AppicLab-servers of derden.
Hoe gebruik ik de auto-fixsuggesties?
Als je kleurenpaar zakt voor WCAG AA, toont het suggestiepanel de kleinste lichtheidsaanpassing van de tekst- of achtergrondkleur die de doelverhouding bereikt, met behoud van de oorspronkelijke tint en verzadiging. Klik op "Toepassen" om het live te bekijken, of kopieer de hexcode direct. Klik op het dobbelsteenicoon om een gloednieuw geslaagd palet willekeurig te genereren.
Kan zakkend kleurcontrast leiden tot een boete of rechtszaak?
Ja. In de Verenigde Staten is de ADA (Americans with Disabilities Act) toegepast op websites, en bedrijven hebben rechtszaken gehad — waaronder federale rechtszaken — vanwege ontoegankelijk kleurcontrast. In de EU vereist de European Accessibility Act (EAA) dat de meeste digitale producten en diensten vanaf juni 2025 voldoen aan WCAG 2.1 AA, met sancties per lidstaat bij overtredingen. De Britse Equality Act 2010 kent vergelijkbare verplichtingen. Sites van de overheid en publieke sector kennen de strengste handhaving. Voldoen aan WCAG AA-contrast is een van de minst arbeidsintensieve manieren om je juridische risico te verkleinen.

Bronnen

Steun de maker

Heeft deze tool je geholpen? ☕

Dit is een gratis bijproject dat ik in mijn vrije tijd heb gebouwd. Als het je tijd bespaarde of je hielp een beslissing te overdenken, dan houdt een koffie voor mij de boel draaiende!

Trakteer me op een koffie

Meer kleine hulpmiddelen van AppicLab