Je hebt een kleurenpalet gekozen dat er prachtig uitziet — en dan blijkt de tekst voor een deel van je bezoekers nauwelijks leesbaar. Voor mensen met een lagere gezichtsscherpte, ouderen én mensen met een afwijkend kleurzicht kan te weinig contrast het verschil maken tussen moeiteloos lezen en afhaken.
De WCAG-contrastregels geven je concrete, meetbare grenzen om dat te voorkomen. In deze gids leggen we uit wat een contrastverhouding precies is, welke criteria er gelden, waarom felle kleuren je kunnen misleiden en hoe je je eigen ontwerp stap voor stap controleert.
Wat is een contrastverhouding eigenlijk?
De WCAG-contrastmaat meet in essentie het verschil in helderheid (luminantie) tussen twee kleuren, op een schaal van 1:1 (wit op wit) tot 21:1 (zwart op wit) — zo vatten toegankelijkheidsbronnen als WebAIM en AccessibleWeb het samen. Zwart op wit is daarmee het hoogst haalbare contrast (bron: AccessibleWeb).
Belangrijk om te weten: het gaat om helderheid, niet om kleurtoon. Twee kleuren kunnen er totaal verschillend uitzien en toch bijna dezelfde helderheid hebben. Dan is de contrastverhouding laag, hoe “verschillend” de kleuren ook ogen.
Nog een handig weetje uit het contrastartikel van WebAIM: als je tekst- en achtergrondkleur omwisselt, blijft de contrastverhouding gelijk. Donkerblauw op wit heeft dus dezelfde ratio als wit op donkerblauw.
De drie WCAG-criteria die over contrast gaan
WCAG 2 kent drie succescriteria die direct over contrast gaan: 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced) en 1.4.11 Non-text Contrast (bron: WebAIM).
1.4.3 Contrast (Minimum) — niveau AA
Dit is de klassieke contrastcheck waar de meeste ontwikkelaars zich aan houden. De regels op niveau AA (bron: Section508.gov en W3C, Understanding SC 1.4.3):
- Normale tekst: minimaal een contrastverhouding van 4,5:1 tussen tekst en achtergrond.
- Grote tekst: minimaal 3:1. Grote tekst is tekst van 18pt of groter, of 14pt in vetgedrukte vorm.
Een verhouding van 4,5:1 betekent dat de lichtere kleur minstens viereneenhalf keer zo helder is als de donkere (bron: AccessibleWeb). Dit criterium geldt ook voor afbeeldingen van tekst.
1.4.6 Contrast (Enhanced) — niveau AAA
Dit criterium stelt strengere contrasteisen op het hoogste conformiteitsniveau (AAA). Streef je naar maximale leesbaarheid — bijvoorbeeld voor een breed en divers publiek — dan is dit het niveau om te onderzoeken. De precieze grenswaarden vind je in de Understanding-documenten van het W3C.
1.4.11 Non-text Contrast
Contrast gaat niet alleen over tekst. Dit criterium stelt eisen aan het contrast van interfacecomponenten en grafische elementen, zoals knopranden, formuliervelden en pictogrammen die betekenis dragen. Contrastcheckers zoals die van AccessibleWeb toetsen UI-componenten daarom apart; de exacte grenswaarde staat in het bijbehorende Understanding-document van het W3C.
De uitzonderingen
Niet alles hoeft aan contrasteisen te voldoen. Incidentele elementen — zoals puur decoratieve onderdelen — en logo’s kennen geen contrastvereisten (bron: WebAIM). Je merknaam in het logo mag dus een lager contrast hebben; de navigatietekst ernaast niet.
Waarom felle kleuren je kunnen misleiden
Hier gaat het in de praktijk vaak mis: een kleur die fel oogt, heeft niet automatisch voldoende contrast. WebAIM geeft sprekende voorbeelden op een witte achtergrond:
- Puur rood (#FF0000): contrastverhouding van 4:1 — net ónder de grens voor normale tekst.
- Puur groen (#00FF00): slechts 1,4:1 — ver onder elke norm, hoe fel het ook lijkt.
- Puur blauw: 8,6:1 — ruim voldoende.
Puur groen springt eruit op je scherm, maar de berekende relatieve luminantie ligt relatief dicht bij die van wit — vandaar de lage ratio. Precies daarom kun je contrast niet op het oog beoordelen: je hebt een meting nodig.
Voor mensen met een afwijkend kleurzicht — bijvoorbeeld protanopie (waarbij de functie van het roodgevoelige L-kegeltype afwezig is) of protanomalie (waarbij de spectrale gevoeligheid van dat kegeltype afwijkt) — komt daar een laag bij. Voldoende luminantiecontrast helpt dan doorgaans, maar is geen vervanging voor aanvullende signalen naast kleur.
Kleur mag nooit de enige betekenisdrager zijn (WCAG 1.4.1)
Naast contrast is er een criterium dat vaak over het hoofd wordt gezien: WCAG 1.4.1 Use of Color. Kleur mag niet het enige visuele middel zijn om informatie over te brengen, een actie aan te geven, een reactie uit te lokken of een element te onderscheiden (bron: Section508.gov).
Denk aan een formulier waarin foutieve velden alleen een rode rand krijgen, of een grafiek waarin lijnen alleen door kleur verschillen. Voor iemand met deuteranopie of deuteranomalie kunnen rood- en groentinten lastiger te onderscheiden zijn — en dan komt de boodschap mogelijk niet over.
De oplossing is altijd een tweede signaal toevoegen: een icoon, een tekstlabel, een patroon of een vormverschil. Kleur mag ondersteunen, maar nooit alleen dragen.
Speciaal geval: links in lopende tekst
Wil je links alleen door kleur onderscheiden van omringende tekst, dan gelden er volgens WebAIM drie eisen tegelijk:
- Minimaal 3:1 contrast tussen de bodytekst en de linktekst.
- Een visuele aanwijzing (niet alleen een kleurverandering) bij toetsenbordfocus — WebAIM raadt dit ook bij muishover aan. De gangbaarste oplossing: de link onderstrepen bij hover en focus.
- Daarbovenop de gewone eis van 4,5:1 uit criterium 1.4.3 tussen de linktekst en de achtergrond.
Alle drie tegelijk halen kan lastig zijn. Veel teams kiezen daarom voor de eenvoudigste route: links standaard onderstrepen. Dan vervalt de afhankelijkheid van kleur grotendeels.
Zo controleer je je kleuren stap voor stap
Contrast controleren hoeft geen groot project te zijn. Een praktische werkwijze:
Stap 1: Verzamel je kleurparen. Inventariseer welke voorgrond- en achtergrondkleuren in je ontwerp naast elkaar voorkomen: bodytekst, koppen, knoppen, links, formuliervelden. WCAG-conformiteit beoordeel je voor de kleurparen die een auteur in de typische weergave naast elkaar verwacht (bron: W3C, Understanding SC 1.4.3).
Stap 2: Meet elk paar met een contrastchecker. Er zijn gratis online checkers waarin je hexcodes invoert of kleuren selecteert met een kleurenkiezer; je ziet direct of het paar voldoet voor kleine tekst, grote tekst en UI-componenten, op AA en AAA (bron: AccessibleWeb). Sommige toetsen tegen WCAG 2.1/2.2 en de Europese norm EN 301 549, relevant voor de European Accessibility Act (bron: GetWCAG).
Stap 3: Pas kleuren aan waar nodig. Haalt een paar de norm niet, maak dan de donkere kleur donkerder of de lichtere lichter. Vaak is een kleine verschuiving in helderheid genoeg, terwijl de kleurtoon herkenbaar blijft voor je huisstijl.
Stap 4: Controleer de betekenislaag. Loop je ontwerp na op plekken waar kleur de enige informatiedrager is: statusindicatoren, grafieken, verplichte velden. Voeg daar een tweede signaal toe.
Stap 5: Bekijk je ontwerp door een andere lens. De simulator van KLEURLENS benadert welke kleurverschillen kunnen samenvallen bij kleurzichtprofielen als protanopie, deuteranopie of tritanopie. Dat is nadrukkelijk geen weergave van iemands exacte, subjectieve waarneming — maar het maakt snel zichtbaar waar je ontwerp op kleur alleen leunt.
Veelgemaakte misverstanden
“Mijn kleuren zien er verschillend uit, dus het contrast is goed.” Nee: de contrastmaat gaat over helderheid, niet over kleurtoon. Twee duidelijk verschillende kleurtonen kunnen toch een lage ratio opleveren.
“Hoe hoger de ratio, hoe beter — dus altijd zwart op wit.” Voor toegankelijkheid op zich geldt: hoe hoger het linkergetal, hoe beter. Maar de norm vraagt geen 21:1, en een zeer hoog contrast is niet voor iedere gebruiker automatisch comfortabeler. Ruim voldoen aan 4,5:1 geeft je ontwerpvrijheid én leesbaarheid.
“Kleurenblind betekent geen kleur zien, dus contrast helpt toch niet.” “Kleurenblind” betekent zelden dat iemand géén kleur ziet. Bij anomale trichromasie (zoals deuteranomalie) wijkt de spectrale gevoeligheid van een kegeltype af; bij dichromasie (zoals deuteranopie) is de functie van één kegeltype afwezig. Voldoende contrast helpt doorgaans — maar het vervangt aanvullende signalen naast kleur niet.
“Alles op mijn pagina moet aan de contrasteis voldoen.” Logo’s en incidentele, decoratieve elementen zijn uitgezonderd (bron: WebAIM). Richt je energie op tekst, bedieningselementen en betekenisvolle graphics.
Begin vandaag: controleer je vijf belangrijkste kleurparen
Je hoeft niet je hele site in één keer te herzien. Pak vandaag de vijf meest voorkomende kleurcombinaties uit je ontwerp — bodytekst, koppen, primaire knop, links en foutmeldingen — en voer ze in een gratis contrastchecker in.
Haalt een paar de 4,5:1 (of 3:1 voor grote tekst) niet, pas dan de helderheid aan en meet opnieuw. Bekijk het resultaat daarna in de KLEURLENS-simulator, die benadert welke kleurverschillen bij verschillende kleurzichtprofielen kunnen samenvallen. Zo weet je binnen een uur waar je ontwerp staat — en wat de eerstvolgende verbetering is.