Kleurcontrast controleren: complete gids voor WCAG en WordPress

Kleurcontrast controleren doe je door de kleur van tekst, iconen, knoppen en andere relevante elementen te vergelijken met hun directe achtergrond. Volgens WCAG 2.2 geldt doorgaans minimaal 4,5:1 voor normale tekst, 3:1 voor grote tekst en 3:1 voor relevante niet-tekstuele interface-elementen en grafische objecten. Meet niet alleen de standaardweergave, maar ook links, formuliermeldingen, hover- en focus-states.

Goed contrast helpt bezoekers om content, navigatie en formulieren te lezen en gebruiken, ook bij verminderd zicht, fel licht of een minder goed scherm. Het is tegelijk maar één onderdeel van toegankelijkheid. Een goede contrastscore maakt een website dus niet automatisch volledig WCAG-conform.

Wat is kleurcontrast?

Kleurcontrast is het zichtbare verschil tussen een voorgrond en de achtergrond erachter. Denk aan donkere tekst op een lichte achtergrond, witte tekst op een gekleurde knop of een focusrand rond een invoerveld.

Contrast wordt uitgedrukt als een verhouding, bijvoorbeeld 4,5:1. Hoe hoger de verhouding, hoe duidelijker het verschil in helderheid tussen beide kleuren. Alleen twee verschillende kleuren kiezen is niet genoeg: blauw op paars kan voor veel bezoekers nog steeds lastig te onderscheiden zijn.

Welke WCAG-contrastverhoudingen gelden?

Voor kleurcontrast zijn vooral WCAG-succescriteria 1.4.3 en 1.4.11 relevant. Gebruik onderstaande scorecard als uitgangspunt bij een ontwerp, contentcontrole of WordPress-update.

Onderdeel	Minimale verhouding	Praktische controle	Voorbeeld van verbetering
Normale lopende tekst	4,5:1	Meet tekstkleur tegen de directe achtergrondkleur.	Vervang lichtgrijze tekst op wit door een donkerdere tekstkleur.
Grote tekst	3:1	Gebruik deze grens alleen wanneer de tekst onder de WCAG-definitie van grote tekst valt.	Controleer een grote kop apart van de bodytekst eronder.
Tekst in een knop	4,5:1	Meet het label tegen de knopkleur, ook bij hover en focus.	Kies een donkerder knopvlak of een contrasterender labelkleur.
Rand van invoerveld of focus-indicator	3:1	Meet de indicator tegen aangrenzende kleuren.	Maak de focusrand duidelijker dan een subtiele lichtgrijze omlijning.
Betekenisvol icoon of grafisch object	3:1	Beoordeel of het icoon nodig is om een functie of informatie te begrijpen.	Verhoog het contrast van een zoek-, waarschuwing- of downloadicoon.
Logo of decoratief element	Geen minimumeis vanuit deze criteria	Beoordeel wel of het element belangrijke informatie bevat.	Gebruik niet een slecht leesbaar logo als enige drager van essentiële informatie.

De uitzondering voor grote tekst is beperkt. Pas deze niet toe op gewone bodytekst omdat die toevallig iets groter is opgemaakt. Let er bovendien op dat een toolwaarde niet naar boven mag worden afgerond om alsnog aan de eis te voldoen.

Niet-tekstcontrast: meer dan alleen letters

Niet-tekstcontrast gaat over onderdelen die een bezoeker nodig heeft om de interface te bedienen of betekenisvolle informatie te begrijpen. Voorbeelden zijn de zichtbare rand van een invoerveld, een focus-indicator, een pijl in een accordeon, een menu-icoon en een lijn in een grafiek die data overbrengt.

Een decoratieve vorm hoeft niet aan de 3:1-eis te voldoen. Een icoon dat een actie uitvoert of een foutstatus aanduidt, meestal wel. Beoordeel dus eerst de functie van het element en meet daarna het contrast met de aangrenzende kleur.

Kleurcontrast controleren in vijf stappen

1. Breng belangrijke schermen in kaart. Begin met de homepage, dienstenpagina’s, contact- en formulierpagina’s, navigatie, offerte- of aanvraagflow en veelbezochte landingspagina’s. Controleer ook templates die op veel pagina’s terugkomen.
2. Inventariseer alle kleurcombinaties. Noteer per scherm tekst op achtergrond, links in lopende tekst, knoppen, labels, foutmeldingen, invoervelden, iconen, grafieken en focus-states. Neem zowel desktop als mobiel mee.
3. Meet de daadwerkelijke combinatie. Gebruik een contrastchecker of een browserextensie en voer de voorgrond- en achtergrondkleur in. Bij transparantie, overlays, gradients of afbeeldingen moet je meten wat de bezoeker werkelijk ziet, niet alleen de oorspronkelijke merkkleur.
4. Toets aan de juiste eis. Gebruik 4,5:1 voor normale tekst, 3:1 voor grote tekst en 3:1 voor relevante interfacecomponenten en betekenisvolle grafische objecten. Controleer of een uitzondering werkelijk van toepassing is.
5. Pas aan en test opnieuw. Verander bijvoorbeeld de tekstkleur, achtergrond, overlay, rand of focuskleur. Test vervolgens de standaard-, hover-, actieve, fout- en focusweergave opnieuw. Kijk daarbij niet alleen naar de toolscore, maar ook naar leesbaarheid in de pagina-context.

Welke onderdelen van je website controleer je?

Tekst, koppen en links

Controleer bodytekst, bijschriften, navigatielabels, footertekst en tekst in banners. Links in een alinea verdienen extra aandacht. Als een link alleen door kleur verschilt van de omringende tekst, moet dat verschil niet de enige aanwijzing zijn. Gebruik bijvoorbeeld ook onderstreping of een andere visuele aanduiding.

Knoppen en call-to-actions

Een CTA bestaat vaak uit meerdere contrastvragen: het label tegenover de knopachtergrond, de knop tegenover de omliggende sectie en de focus-indicator wanneer iemand met het toetsenbord navigeert. Controleer elke toestand afzonderlijk. Een knop die in de standaardstatus goed leesbaar is, kan bij hover of focus alsnog onvoldoende zichtbaar worden.

Formulieren en foutmeldingen

Formulieren bevatten regelmatig subtiele randen, placeholders en foutmeldingen. Zorg dat een invoerveld herkenbaar is als veld en dat de focus duidelijk zichtbaar wordt. Maak een fout bovendien niet uitsluitend herkenbaar met rood: voeg begrijpelijke tekst of een icoon met toegankelijke naam toe.

Iconen, grafieken en afbeeldingen met tekst

Een zoekicoon, menu-icoon of statusindicator kan een functioneel interface-element zijn. Meet dan het contrast. Bij grafieken moeten lijnen, balken of segmenten die informatie dragen voldoende van elkaar en van de achtergrond verschillen. Voeg waar nodig labels, patronen of tekstuele toelichting toe, zodat kleur niet de enige informatiedrager is.

Tekst die in een afbeelding is opgenomen valt in veel gevallen onder dezelfde contrasteisen als gewone tekst. Waar het mogelijk is, is echte HTML-tekst vaak beter te beheren en toegankelijker dan tekst die vast in een afbeelding staat. Lees ook onze gids over afbeeldingen optimaliseren in WordPress voor de technische en redactionele aandachtspunten rond beeldmateriaal.

Veelvoorkomende contrastproblemen oplossen

Lichtgrijze tekst op een witte achtergrond

Lichtgrijs wordt vaak ingezet voor een rustige uitstraling, maar is een veelvoorkomende oorzaak van onvoldoende contrast. Maak de tekstkleur donkerder in plaats van de lettergrootte willekeurig te verhogen. Controleer daarna ook teksten in kaarten, footers en formulieren, want daar worden vaak afwijkende kleuren gebruikt.

Witte tekst op fotografie of een gradient

Een afbeelding heeft zelden overal dezelfde helderheid. Een combinatie kan links voldoende contrast hebben en rechts niet. Gebruik een vaste, voldoende donkere of lichte overlay achter de tekst, plaats tekst in een effen vlak of kies een afbeelding met voldoende rustige ruimte. Controleer het contrast op alle relevante delen en schermformaten.

Een huisstijlkleur die niet werkt als tekstkleur

Je hoeft een huisstijl niet volledig te vervangen wanneer een accentkleur onvoldoende contrast heeft. Leg in je design system vast waarvoor een kleur wel geschikt is: bijvoorbeeld als achtergrond, subtiel decoratief accent of knopvlak met een contrasterend label. Kies daarnaast een donkerdere of lichtere variant voor tekst, links en focus-indicatoren.

Alleen kleur gebruiken voor status of betekenis

Rood voor een foutmelding en groen voor een geslaagde actie zijn nuttige aanvullingen, maar mogen niet de enige aanwijzing zijn. Voeg een duidelijke tekstmelding, icoon, patroon of label toe. Zo begrijpen ook bezoekers die kleur minder goed waarnemen wat er gebeurt.

Tools gebruiken zonder blind op de score te varen

Een contrastchecker is geschikt om een kleurpaar objectief te meten. Browserontwikkelaarstools en toegankelijkheidsextensies helpen om problemen op een pagina te signaleren. Toch vraagt een goede beoordeling altijd om context: is het element functioneel, verandert de achtergrond per scherm, is er transparantie toegepast en is kleur de enige manier waarop informatie wordt overgebracht?

Automatische controles vinden niet elk probleem. Controleer daarom handmatig de belangrijkste gebruikerspaden, inclusief toetsenbordfocus. Een zichtbare focus-state is essentieel voor mensen die zonder muis navigeren.

Praktische controlelijst voor WordPress

• Controleer de globale kleuren in je theme of site-editor, niet alleen losse pagina’s.
• Controleer de kleuren van headings, paragrafen, links en kleine bijschriften.
• Test knoppen en links in standaard-, hover-, actieve en focus-status.
• Controleer formulierlabels, invoerranden, foutmeldingen en bevestigingen.
• Controleer herbruikbare blokken, banners, pop-ups en footeronderdelen.
• Controleer tekst op afbeeldingen, video-overlays en gradients op verschillende schermbreedtes.
• Controleer grafieken, tabellen en statusbadges die informatie met kleur tonen.
• Voer na een theme-, plugin- of contentwijziging opnieuw een controle uit.

Wijzig je templates of styling, controleer dan ook of er geen onbedoelde technische problemen ontstaan, zoals foutieve verwijzingen na een herstructurering. Onze gids over 404- en soft-404-fouten oplossen helpt je zulke SEO-problemen systematisch te beoordelen.

Wat kleurcontrast niet oplost

Contrast is belangrijk, maar lost andere toegankelijkheidsproblemen niet op. Afbeeldingen hebben nog steeds een passend tekstalternatief nodig wanneer ze inhoudelijke informatie overbrengen. Interactieve onderdelen moeten met een toetsenbord te bedienen zijn. Ook een logische koppenstructuur, duidelijke formulierlabels en zorgvuldig gebruik van ARIA blijven nodig.

Zie kleurcontrast daarom als een vast onderdeel van ontwerp, contentredactie en kwaliteitscontrole, niet als een losse eindtest.

Wanneer schakel je een specialist in?

Schakel hulp in wanneer contrastproblemen door het hele ontwerp of WordPress-theme lopen, wanneer je een rebranding voorbereidt, of wanneer formulieren, navigatie en interactieve componenten allemaal aandacht vragen. Bij een nieuw ontwerp is het efficiënter om contrastkeuzes direct in componenten en stijlafspraken vast te leggen dan om ze later pagina voor pagina te herstellen.

LYNX Media kan toegankelijkheid meenemen in een traject voor strategisch en creatief webdesign. Bekijk ook onze diensten voor webdesign, SEO en Google Ads als je websitebrede verbeteringen wilt combineren met online groeikansen.

Bespreek je website of online groeikansen met LYNX Media.