Kleurcontrast checker

Wat de contrastverhouding betekent

De contrastverhouding vergelijkt hoe licht twee kleuren zijn. Zwart op wit is het maximum: 21:1. Twee gelijke kleuren geven 1:1. WCAG rekent met de relatieve luminantie van elke kleur, oftewel hoeveel licht het oog waarneemt. Groen telt daarin veel zwaarder dan rood en blauw. Daarom oogt geel op wit fel en haalt het toch maar 1,07:1.

De uitkomst wordt niet afgerond. Een verhouding van 4,49:1 haalt de eis van 4,5:1 niet, ook als een andere tool er 4,5 van maakt.

Waarom te weinig contrast bestellingen kost

Lichtgrijze tekst oogt rustig in een ontwerpbestand. Op een telefoon in de zon valt hij weg, en voor iemand die slecht ziet was hij al nauwelijks te lezen. Wie de levertijd, de prijs of de knop naar de kassa niet goed ziet, rekent minder snel af. In Nederland leven ruim 2 miljoen mensen met een beperking (Rijksoverheid). In het Verenigd Koninkrijk bleek uit de Click-Away Pound Survey van 2019 dat 69% van de mensen met een beperking wegklikt bij een website met drempels.

Verkoop je online aan consumenten, dan is het sinds 28 juni 2025 ook een wettelijke eis. Een dienstverlenend microbedrijf, met minder dan 10 medewerkers en maximaal €2 miljoen jaaromzet of balanstotaal, is uitgezonderd; dat check je op Val ik onder de EAA? De ACM noemt voor webshops WCAG 2.1 niveau AA, en daar horen 1.4.3 en 1.4.11 bij. Hoe de niveaus werken, lees je in wat WCAG is. Welke eisen er verder gelden, staat in de WCAG 2.2 AA-checklist in het Nederlands.

Welke eis geldt waarvoor

Grote tekst is in WCAG 18 punt of meer, of 14 punt vet. Op een scherm komt dat neer op 24 pixels in normaal gewicht of ongeveer 18,66 pixels vet. Een kop van 20 pixels die niet vet is, geldt dus als normale tekst en moet 4,5:1 halen.

Bij 1.4.11 gaat het om wat je nodig hebt om een onderdeel te herkennen. Is de rand het enige wat laat zien waar een invoerveld zit, dan moet die rand 3:1 halen tegen de achtergrond. Hetzelfde geldt voor een icoon dat zonder tekst iets betekent en voor de rand die aangeeft waar je met het toetsenbord bent. Logo's en tekst die puur decoratief is, vallen buiten de contrasteisen.

Waar het in webshops meestal misgaat

• Lichtgrijze tekst. Productomschrijvingen, "incl. btw", levertijden en de kleine letters in de footer. #999999 op wit haalt maar 2,84:1.
• Placeholdertekst in het zoekveld of het adresformulier. Ook dat is tekst, met dezelfde eis van 4,5:1.
• Tekst op een foto of een verloop. Meet op de plek waar de achtergrond het meest op de letters lijkt. Daar is het contrast het laagst.
• Oranje knoppen met witte tekst. Fel oranje als #FF6600 haalt met wit 2,93:1, te weinig voor knoptekst van normale grootte. Een donkerder tint als #A8481A haalt 5,82:1.
• Labels als "Uitverkocht" of "Laatste stuks" in een lichte kleur op een lichte achtergrond.
• Doorgestreepte oude prijzen. Die worden vaak lichtgrijs gemaakt om ze minder nadruk te geven. Om de korting te zien moet de klant ze wel kunnen lezen.

Een uitgeschakelde knop is uitgezonderd. Staat "In winkelwagen" uit omdat een maat op is, dan hoeft die knop de eis niet te halen.

In ons eigen onderzoek naar 259 Nederlandse webshops was kleurcontrast de fout die we het vaakst vonden: op 87,3% van de gescande homepages haalde minstens één tekst, knop of link de eis niet. Dat is een ondergrens, want we maten alleen de homepage en alleen automatisch. Lees de cijfers en de methode in het onderzoek naar 259 Nederlandse webshops.

Eén kleurpaar is je pagina nog niet

Met deze checker test je een combinatie die je al kent. Op een productpagina staan al snel meer kleurcombinaties dan je denkt, plus labels, prijzen en meldingen die pas verschijnen als je iets aanklikt. Die allemaal met de hand nalopen kost veel tijd.

De gratis scan meet het contrast van de tekst op je homepage en tot drie andere pagina's, bijvoorbeeld een productpagina en de winkelwagen. Je krijgt een score en de eerste bevindingen. Het volledige rapport noemt per element de pagina en de plek in de code, zodat je websitebouwer weet wat er moet veranderen. Tekst op een foto kan een automatische meting niet altijd beoordelen; zulke punten staan erin als handmatige controle. Hoe dat eruitziet, lees je in het volledige voorbeeldrapport.

Wil je daarnaast zelf testen, met je toetsenbord en een schermlezer? In website toegankelijkheid testen lees je hoe je dat stap voor stap aanpakt.