Welke kleurcontrastverhouding is vereist?

WCAG 2.1 niveau AA vereist 4,5:1 contrast voor normale tekst en 3:1 voor grote tekst (18px+ of 14px vet). WCAG AAA verhoogt dit naar 7:1 en 4,5:1. Falend contrast raakt 8% van de mannen en 0,5% van de vrouwen met kleurenblindheid, plus iedereen die in direct zonlicht leest.

Hoe contrastverhoudingen werken

De contrastverhouding meet het relatieve luminantieverschil tussen de voorgrond (tekst) en de achtergrondkleur. De schaal loopt van 1:1 (identieke kleuren, nul contrast) tot 21:1 (zwart op wit, maximaal contrast).

Het menselijk visueel systeem kan tekst betrouwbaar onderscheiden tot ongeveer 3:1 in ideale omstandigheden. In lastige omstandigheden. Fel zonlicht, stoffige schermen, ouder wordende ogen, kleurenblindheid, stijgt de drempel fors. WCAG 2.1 niveau AA op 4,5:1 biedt een buffer voor echte kijkomstandigheden.

Bereken contrast met de WebAIM Contrast Checker (webaim.org/resources/contrastchecker), het accessibility-paneel in de DevTools van je browser, of de Figma Contrast-plugin tijdens het ontwerpen.

De groottedrempels uitgelegd

Normale tekst: elke tekst van 17px of kleiner (of niet-vette tekst kleiner dan 24px) vereist minimaal 4,5:1 contrast.

Grote tekst: tekst van 18px en groter, of vette tekst van 14px en groter, vereist slechts 3:1. Dat weerspiegelt dat grotere tekens bij lager contrast makkelijker te onderscheiden zijn.

UI-componenten en grafische elementen: randen van formuliervelden, focusindicatoren, grafiekelementen en iconen die informatie overbrengen vereisen 3:1 contrast met de aangrenzende kleur.

Decoratieve tekst: tekst die puur decoratief is en geen informatie overbrengt heeft geen contrasteis.

Waar webshops vaak falen op contrast

Sale-prijslabels. Rode sale-prijzen op witte achtergrond falen vaak. Rood (#FF0000) op wit is slechts 3,99:1, onder de drempel van 4,5:1 voor normale tekst. Diepere roodtinten of grotere tekst lost dit op.

Lichtgrijze bodytekst. Veel ontwerpen gebruiken #999999 of #888888 voor secundaire info (productcodes, kleine lettertjes, datums). Grijs #999 op wit is slechts 2,85:1, faalt fors. Stap over op minimaal #767676 (4,55:1) of #666666 voor een comfortabele marge.

Witte tekst op gekleurde knoppen. CTA-knoppen in merkkleur met witte tekst falen regelmatig. Een middenblauwe merkkleur (#4A90D9) met witte tekst is slechts 3,1:1. Verdiep de knopkleur of gebruik donkere tekst.

Randen van invoervelden. Dunne grijze randen rond formuliervelden falen doorgaans de 3:1-eis voor UI-componenten. Een rand van #767676 of donkerder op witte achtergrond haalt de drempel.

Placeholder-tekst. Placeholder-tekst zou idealiter aan de contrasteisen moeten voldoen. Mik op minstens 4,5:1 om veilig te zitten, en zorg dat placeholder-tekst verdwijnt zodra echte labeltekst zichtbaar is.

Promobanners. Tekst over productfotografie zonder donkere overlay of tekstschaduw faalt vrijwel altijd op contrast. Het achtergrondbeeld zorgt voor onvoorspelbaar contrast over verschillende schermkalibraties en kijkomstandigheden.

Praktische tools

WebAIM Contrast Checker: webaim.org/resources/contrastchecker. Voer hexcodes direct in, direct resultaat

Chrome DevTools: inspecteer een element, klik op het kleurvlak in het computed-styles-paneel, toont de contrastverhouding automatisch

Figma: plugins als Contrast of A11y – Color Contrast Checker bieden inline-controle tijdens het ontwerpen

Stark (browserextensie en Figma-plugin): volledige accessibility-toolkit met contrastcontrole en simulatie van kleurenblindheid

Design-vriendelijke manieren om contrast te halen

Hoog contrast betekent geen lelijk design. De beperking is specifiek: het contrast tussen tekst en de directe achtergrond. Dat laat enorme vrijheid voor:

• Merkkleuren als accentelementen, randen en decoratieve achtergronden (zonder tekst eroverheen)
• Gekleurde UI-elementen op grotere maten (waar de 3:1-drempel geldt)
• Donkere tekst op lichte merkkleur-achtergronden (haalt het vaak makkelijk)
• Gradient-achtergronden waar tekst op het lichtste deel staat

De meest voorkomende aanpassing: van lichte merkkleur-achtergronden met witte tekst naar donkere merkkleur-achtergronden met witte tekst, of lichte merkkleur-achtergronden met donkere tekst.

Loop je kleurenpalet systematisch na voordat je bouwt: check elke tekstkleur tegen elke achtergrond waarop hij voorkomt. Een designreview van één dag voorkomt weken aan developer-herwerk. Plan een gesprek om te bespreken hoe je toegankelijkheid vanaf het begin in je designproces inbouwt.