Kleurcontrast en WCAG: wat is de eis en hoe meet je het?

Kort antwoord: WCAG 2.1 niveau AA vraagt een contrastverhouding van minstens 4,5:1 tussen tekst en achtergrond voor gewone tekst, en 3:1 voor grote tekst (vanaf ongeveer 18 punt, of 14 punt vetgedrukt). Te weinig contrast is veruit de meest voorkomende toegankelijkheidsfout in webshops — en gelukkig vaak in één keer themabreed op te lossen.

Waarom contrast zo belangrijk is

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 betekent "4,5:1"?

Contrast wordt uitgedrukt als een verhouding tussen de helderheid van de voorgrond (de tekst) en de achtergrond. Zwart op wit is ongeveer 21:1 — het maximum. Hoe dichter de twee kleuren bij elkaar liggen, hoe lager de verhouding. Onder de 4,5:1 voldoet gewone tekst niet meer.

Een paar voorbeelden:

• Donkergrijze tekst (#595959) op wit: ongeveer 7:1 — ruim voldoende.
• Middelgrijs (#999999) op wit: ongeveer 2,8:1 — onvoldoende.
• Wit op een net-te-licht merkkleurtje: vaak net onder de lat.

Hoe meet je het zelf?

Je hoeft niet te gokken. Er zijn drie makkelijke manieren:

1. Een gratis scan. Een geautomatiseerde toets berekent de werkelijke contrastverhouding van elk tekstelement op je pagina en laat zien welke zakken — inclusief de gemeten waarde naast de vereiste.
2. Een contrast-checker. Vul de twee kleurcodes in en je krijgt de verhouding plus of het slaagt.
3. De ontwikkelaarstools van je browser. Die tonen bij een geselecteerd element vaak direct de contrastverhouding.

Hoe los je het op?

Maak de tekst- of achtergrondkleur donkerder of lichter tot de verhouding klopt. Het mooie: kleur zit meestal in je thema-instellingen, dus je past het één keer aan en het geldt voor je hele winkel. In Shopify vind je dit onder thema-instellingen → kleuren; let vooral op knopteksten, prijslabels en links, want daar zit de meeste winst.

Let op grote tekst en knoppen

Voor grote koppen geldt de soepelere eis van 3:1. En knoppen tellen ook: de tekst óp een knop moet voldoende contrast hebben met de knopkleur. Juist je belangrijkste call-to-action — "In winkelwagen", "Afrekenen" — wil je niet net onder de lat hebben.

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 — zodat je precies weet wat je moet aanpassen.