Kleurcontrast en WCAG: wat is de eis en hoe meet je het?
5 juni 2026
Kort antwoord. WCAG niveau AA vraagt een contrastverhouding van minstens 4,5:1 tussen tekst en achtergrond voor gewone tekst, en 3:1 voor grote tekst en grafische elementen (iconen, invoerveld-randen). Te weinig contrast is veruit de meest voorkomende toegankelijkheidsfout in webshops, en gelukkig vaak in één keer themabreed op te lossen. Het is bovendien 100% exact te meten met software, dus er valt niet over te discussiëren.
Waarom is contrast zo belangrijk?
Lichtgrijze tekst op wit ziet er strak uit op jouw scherm, maar is moeilijk leesbaar voor slechtzienden, voor oudere bezoekers, en voor iedereen die in fel zonlicht op een telefoon kijkt. Een groot deel van je klanten valt in minstens één van die groepen. Slecht contrast kost je dus letterlijk leesbaarheid, en daarmee verkoop.
Wat zijn de exacte WCAG-contrasteisen?
De norm maakt onderscheid naar tekstgrootte en type element. Hoe kleiner de letters, hoe scherper het contrast moet zijn:
- Gewone tekst (kleiner dan 24px, of 18,66px vetgedrukt): minstens 4,5:1.
- Grote tekst (vanaf 24px, of 18,66px vetgedrukt, oftewel 18pt / 14pt bold): minstens 3:1.
- Grafische componenten (iconen, invoerveld-randen, actieve knop-randen): minstens 3:1 ten opzichte van de aangrenzende kleuren (WCAG 1.4.11).
Contrast wordt uitgedrukt als een verhouding: 1:1 is geen contrast, 21:1 is puur zwart op wit. Een paar veelvoorkomende combinaties:
| Tekstkleur | Achtergrond | Verhouding | WCAG AA | In de praktijk |
|---|---|---|---|---|
Zwart (#000000) | Wit (#FFFFFF) | 21:1 | Slaagt ruim | Perfect leesbaar voor iedereen. |
Donkergrijs (#595959) | Wit (#FFFFFF) | 7:1 | Slaagt | Voldoet voor kleine én grote tekst. |
Wit (#FFFFFF) | Oranje (#FF9900) | 2,4:1 | Zakt | Populair voor "In winkelwagen"-knoppen, maar onleesbaar. |
Lichtgrijs (#999999) | Wit (#FFFFFF) | 2,8:1 | Zakt | Vaak gebruikt voor subtiele productinfo of footers. |
Hoe meet je het contrast zelf?
Je hoeft niet te gokken, en niet zelf met formules aan de slag. Er zijn drie betrouwbare manieren:
- Een geautomatiseerde scan (aanbevolen). Tools zoals Seviranta berekenen de contrastwaarde van elk tekstelement op de pagina in één keer en markeren de exacte coderegel van de overtreders, inclusief de gemeten waarde naast de vereiste.
- De ontwikkelaarstools van je browser. Klik in Chrome of Edge met de rechtermuisknop op tekst → "Inspecteren"; de kleurkiezer toont vaak direct de contrastverhouding en de WCAG-status.
- Een handmatige contrast-checker. Vul de twee Hex-codes in en je krijgt de verhouding. Handig in de designfase, maar tijdrovend voor een hele live site.
Hoe los je contrastfouten efficiënt op?
Het mooie van contrastfouten: ze zitten bijna altijd centraal aangestuurd. In Shopify, WooCommerce of Magento zijn de kleuren gekoppeld aan globale variabelen in je thema. Maak de tekst- of achtergrondkleur een tint donkerder of lichter tot de verhouding klopt, en je voldoet in één keer voor je hele webshop aan de contrast-eis.
Begin bij je conversietrechter: de tekst op de "In winkelwagen"- en "Afrekenen"-knoppen, je prijslabels, menu-items en de waarschuwingen bij de checkout. Daar zit de meeste winst. Dit is overigens een van de 10 meest voorkomende toegankelijkheidsfouten.
Waarom lost een toegankelijkheids-widget dit niet op?
Veel ondernemers hopen contrast te fixen met een overlay-widget en z'n "hoog-contrast-knop". Dat is technisch én juridisch onvoldoende: toezichthouders en AI-scrapers controleren de standaardstaat van je broncode. Voldoet je CSS niet aan 4,5:1, dan voldoe je niet, een tijdelijk JavaScript-laagje verandert dat niet. Waarom een overlay-widget je niet beschermt gaat hier dieper op in. De enige houdbare route is de kleuren in je eigen thema aanpassen.
Wat verandert er met WCAG 3.0 (APCA)?
In de aankomende WCAG 3.0-richtlijnen wordt de huidige wiskundige contrastformule mogelijk opgevolgd door APCA (Advanced Perceptual Contrast Algorithm), dat wordt momenteel als kandidaat onderzocht; besloten is dit nog niet. APCA sluit beter aan op hoe het menselijk oog contrast écht waarneemt, het houdt rekening met lettertype, dikte en context, in plaats van puur de helderheid van twee kleuren. Zet je je site nu strak op de 4,5:1-eis van WCAG 2.1/2.2, dan sta je ook bij die overgang goed voorbereid.
Zie waar jouw site staat
Benieuwd welke kleuren op je site nog niet voldoen? Scan gratis één pagina. Je ziet per plek de gemeten contrastverhouding naast de vereiste, met de echte kleuren van je site, in minder dan 60 seconden, zonder account. Scan je site gratis.