Wat zijn de contrastvereisten voor WCAG?

De WCAG-contrastvereisten bepalen hoe groot het verschil moet zijn tussen de kleur van tekst en de achtergrond waarop die tekst staat. Voor normale tekst geldt een minimale contrastverhouding van 4,5:1 op WCAG-niveau AA. Voor grote tekst en interface-elementen zoals knoppen is de drempel 3:1. Deze eisen gelden voor alle websites en digitale diensten die onder de Europese toegankelijkheidswetgeving vallen, waaronder veel gemeentelijke websites. Hieronder vind je antwoord op de meest gestelde vragen over WCAG-contrast, van de exacte normen tot wat je doet als je huisstijl niet voldoet.

Welke contrastverhouding is vereist volgens WCAG?

Volgens WCAG-succescriterium 1.4.3 (niveau AA) moet normale tekst een minimale contrastverhouding van 4,5:1 hebben ten opzichte van de achtergrond. Grote tekst, vanaf 18pt of 14pt vetgedrukt, mag met een verhouding van 3:1. Voor UI-elementen zoals knoppen, formuliervelden en iconen geldt ook een minimale verhouding van 3:1 (succescriterium 1.4.11).

Ter vergelijking: zwarte tekst op een witte achtergrond heeft het maximale contrast van 21:1. Witte tekst op een lichtgrijze achtergrond kan zakken tot 1,5:1, wat ruim onder de norm valt. Het is belangrijk om te weten dat de contrastverhouding niet wordt afgerond bij de beoordeling. Een waarde van 4,49:1 voldoet dus niet aan de 4,5:1-eis.

De contrasteisen gelden ook voor afbeeldingen van tekst en voor tekst die zichtbaar is in video’s. Beide criteria, 1.4.3 en 1.4.11, vallen onder WCAG-richtlijn 1.4 Onderscheidbaar Deze link opent in een nieuw tabblad en zijn verplicht op niveau AA.

Wat is het verschil tussen WCAG AA en AAA voor contrast?

WCAG-niveau AA vereist een contrastverhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst. WCAG-niveau AAA stelt strengere eisen: 7:1 voor normale tekst en 4,5:1 voor grote tekst. Het verschil zit niet alleen in de getallen, maar ook in de juridische status. Niveau AA is wettelijk verplicht; niveau AAA niet.

Voor overheidswebsites en gemeentelijke websites in Nederland geldt WCAG 2.1 niveau AA als de wettelijke standaard. Hoewel WCAG 2.2 inmiddels is gepubliceerd en als best practice wordt beschouwd, is WCAG 2.1 AA nog steeds de norm waaraan toezichthouders toetsen.

Niveau AAA is zinvol als je website gericht is op een ouder publiek of op mensen met zwaardere visuele beperkingen. Maar verwacht niet dat de meeste websites hieraan voldoen. In de praktijk is AAA voor veel kleurencombinaties lastig te halen zonder de visuele identiteit volledig los te laten. Richt je eerst op een solide AA-score en beschouw AAA als een ambitie, niet als een verplichting.

Welke elementen vallen buiten de WCAG-contrastvereisten?

Niet alles op een webpagina hoeft aan de contrasteisen te voldoen. WCAG benoemt een aantal expliciete uitzonderingen. Tekst die onderdeel is van een logo of merknaam heeft geen minimale contrasteis. Hetzelfde geldt voor decoratieve tekst, inactieve UI-elementen en tekst die voor niemand zichtbaar is.

De volgende elementen zijn vrijgesteld van de WCAG-contrastvereisten:

• Logo’s en woordmerken: Tekst in een logo of merknaam valt buiten de eisen van zowel succescriterium 1.4.3 als 1.4.11.
• Decoratieve tekst: Tekst die puur visueel is en geen informatie overbrengt, hoeft niet te voldoen.
• Inactieve UI-componenten: Een uitgeschakelde knop, een grijs weergegeven formulierveld, elementen die de gebruiker niet kan bedienen.
• Tekst in afbeeldingen zonder informatiefunctie: Tekst die toevallig in een foto verschijnt maar niet relevant is voor de content.
• Browser-bepaalde weergave: Elementen waarvan de opmaak volledig door de browser wordt bepaald en niet door de auteur.

Let op: de uitzondering voor logo’s betekent niet dat je er geen rekening mee hoeft te houden. Het blijft verstandig om ook voor logo’s voldoende contrast na te streven Deze link opent in een nieuw tabblad, zeker als het logo ook als navigatie-element of link fungeert.

Hoe meet je de contrastverhouding van een website?

Je meet de contrastverhouding van een website met gespecialiseerde tools die de kleurwaarden van tekst en achtergrond vergelijken en een verhouding berekenen. Er zijn zowel browserextensies, desktoptools als online tools beschikbaar. De meeste zijn gratis en vereisen geen technische kennis om te gebruiken.

Populaire tools voor het meten van kleurcontrast zijn:

• WAVE Evaluation Tool: Een browserextensie van WebAIM die direct op een webpagina laat zien waar contrastproblemen zitten.
• Colour Contrast Analyser (CCA) van TPGi: Een gratis desktopapplicatie waarmee je contrast meet in applicaties, afbeeldingen en documenten, zonder dat je de hex-code hoeft te kennen.
• Google Chrome Developer Tools: De ingebouwde Color Picker laat je contrast direct in de browser meten en aanpassen.
• Firefox Accessibility Inspector: Ingebouwde tool in Firefox waarmee je per tekstelement de contrastverhouding ziet.
• Tanaguru Contrast Finder: Een online tool die niet alleen de contrastwaarde berekent, maar ook alternatieve kleurcombinaties voorstelt als het contrast te laag is.

Eén aandachtspunt bij het meten: als een element via CSS een transparantie-instelling heeft, kan het meten via een pipet (eyedropper) een onbetrouwbaar resultaat geven. Controleer in dat geval de werkelijke kleurwaarden in de broncode. Houd er ook rekening mee dat geautomatiseerde tools niet alles opvangen. Handmatige controle blijft nodig voor een betrouwbaar totaalbeeld.

Waarom zakken veel websites voor contrastcontroles?

De meest voorkomende oorzaak is dat esthetiek boven leesbaarheid wordt geplaatst. Trendy ontwerpen met zachte kleuren, lichtgrijze tekst op witte achtergronden en subtiele placeholder-tekst in formulieren zien er strak uit, maar halen de 4,5:1-norm zelden. Volgens onderzoek van WebAIM had in 2026 meer dan 83% van de onderzochte homepagina’s tekst met te weinig contrast.

Dat is geen klein probleem. Onvoldoende contrast sluit mensen uit die kleurenblind zijn, een verminderd gezichtsvermogen hebben, of hun scherm gebruiken in fel zonlicht. In Nederland gaat het om een aanzienlijke groep gebruikers die dagelijks tegen digitale obstakels aanlopen.

De meest voorkomende concrete fouten zijn:

• Lichtgrijze tekst op witte achtergrond: Een klassieker in moderne designs die zelden de norm haalt.
• Placeholder-tekst in formulieren: Standaard grijs en bijna altijd te licht.
• Trendy kleurenschema’s: Pastelkleuren en laagcontrastkleuren die visueel aantrekkelijk zijn maar onleesbaar voor velen.
• Tekst over afbeeldingen: Zonder overlay of achtergrondvlak is contrast niet te garanderen.
• Secundaire tekst en labels: Kleine tekst in footers, disclaimers en metadata die structureel wordt vergeten.

Hoe pas je een kleurenpalet aan zonder je huisstijl te verliezen?

Je kunt je kleurenpalet aanpassen aan WCAG-eisen zonder je huisstijl te verliezen door slim te werken met tintvariaties. Het gaat niet om het vervangen van je merkkleur, maar om het kiezen van de juiste tint voor de juiste toepassing. Donkerdere of lichtere varianten van je huisstijlkleur kunnen vaak al voldoende contrast opleveren.

Een paar praktische aanpakken:

• Werk met kleurtokens: Stel een uitgebreid kleurenpalet op met benoemde kleurtokens en leg per combinatie vast of het contrast voldoende is. Tools zoals accessiblepalette.com helpen hierbij.
• Gebruik zwart of wit als tekstkleur: Als je huisstijl alleen eisen stelt aan de achtergrondkleur, is de oplossing eenvoudig: donkere achtergrond, witte tekst. Lichte achtergrond, zwarte tekst.
• Voeg een overlay toe bij tekst op afbeeldingen: Een effen kleurvlak of een transparante donkere overlay achter de tekst garandeert altijd voldoende contrast.
• Bied een hoog-contrast-knop aan: Als aanpassing van de huisstijl te ingrijpend is, kun je gebruikers zelf de optie geven om het contrast te verhogen via een schakelaar bovenaan de pagina.
• Betrek toegankelijkheid vroeg in het ontwerpproces: De meest efficiënte aanpak is om huisstijl en webdesign gelijktijdig te ontwikkelen, zodat contrasteisen meteen worden meegenomen.

Er zijn genoeg kleurencombinaties die zowel visueel sterk als volledig toegankelijk zijn. Het is een kwestie van de juiste tinten kiezen, niet van concessies doen aan je identiteit. Houd ook in het achterhoofd dat WCAG 3.0 naar verwachting een nieuw algoritme (APCA) zal gebruiken dat rekening houdt met lettergrootte en dikte. Voorlopig gelden echter nog de huidige WCAG 2.x-normen.

Wat zijn de gevolgen van niet voldoen aan WCAG-contrasteisen?

Niet voldoen aan de WCAG-contrasteisen kan leiden tot juridische sancties, reputatieschade en uitsluiting van aanbestedingen. Sinds 28 juni 2025 is de European Accessibility Act (EAA) actief gehandhaafd in Nederland. Digitale toegankelijkheid is daarmee een wettelijke plicht geworden voor een groot deel van het bedrijfsleven.

De EAA geldt voor bedrijven met meer dan 10 medewerkers of een omzet van meer dan 2 miljoen euro die digitale producten of diensten aan consumenten in de EU aanbieden. De wet toetst aan de Europese norm EN 301 549, waarin WCAG 2.1 niveau AA als standaard is opgenomen Deze link opent in een nieuw tabblad. Bedrijven die niet voldoen, riskeren waarschuwingen en dwangsommen. De exacte hoogte van boetes in de Nederlandse implementatie is nog niet definitief vastgesteld, maar vergelijkbare wetgeving in Europa kent sancties die kunnen oplopen tot aanzienlijke bedragen.

Naast juridische risico’s zijn er ook zakelijke gevolgen:

• Uitsluiting van aanbestedingen: Bedrijven die niet voldoen aan de EAA kunnen worden uitgesloten van publieke opdrachten, waaronder gemeentelijke websiteprojecten.
• Reputatieschade: Publicatie van handhavingsmaatregelen of klachten over ontoegankelijke dienstverlening ondermijnt het vertrouwen van klanten en partners.
• Verlies van gebruikers: Niet-toegankelijke websites sluiten een grote groep bezoekers uit die anders klant hadden kunnen worden.

Voor digitale producten die vóór 28 juni 2025 op de markt zijn gebracht, geldt een overgangstermijn tot 28 juni 2030, tenzij de website ingrijpend wordt gewijzigd. Maar wachten tot de deadline is geen verstandige strategie. Toegankelijkheid achteraf inbouwen kost altijd meer tijd en geld dan het meteen goed doen.

Wil je weten of jouw website voldoet aan de WCAG-contrasteisen? Bij Stuurlui beoordelen we digitale toegankelijkheid als onderdeel van ons development proces. Neem contact op en we kijken samen wat er nodig is.