Kleurcontrast controleren en verbeteren

Lichtgrijze tekst ziet er op een groot, helder scherm vaak elegant uit. Op een telefoon in de zon, of voor iemand met minder goed zicht, is hij nauwelijks leesbaar. Voldoende kleurcontrast is een van de eenvoudigste verbeteringen voor leesbaarheid en toegankelijkheid.

De normen

WCAG, de internationale richtlijn voor toegankelijkheid, hanteert op niveau AA:

• Gewone tekst — Minimale contrastverhouding: 4,5:1
• Grote tekst (vanaf ongeveer 24 px, of 18,5 px vet) — Minimale contrastverhouding: 3:1
• Grafische elementen en randen van invoervelden die nodig zijn om iets te begrijpen — Minimale contrastverhouding: 3:1

Zwart op wit is 21:1; wit op wit is 1:1.

Meten

Met een contrastcheckerVul de kleurcodes van tekst en achtergrond in, bijvoorbeeld in de gratis checker van WebAIM. Je ziet direct of de combinatie voldoet.

In ChromeKlik met de rechtermuisknop op een tekst → Inspecteren. Klik in het stijlenpaneel op het kleurvlakje bij color. De kleurkiezer toont de contrastverhouding en of die voldoet.

Met een scanLighthouse en WAVE melden teksten met te weinig contrast. Zie Toegankelijkheid controleren.

Waar gaat het vaak mis?

• Lichtgrijze broodtekst of bijschriften.
• Witte tekst op een lichte of drukke foto.
• Tekst in de merkkleur op een witte achtergrond, bij lichte merkkleuren zoals geel, lichtgroen of oranje.
• Placeholdertekst in formulieren.
• Uitgeschakelde of secundaire knoppen.
• Tekst op een kleurverloop: het contrast verschilt per plek.

Verbeteren zonder de huisstijl los te laten

• Maak de tekstkleur donkerder of de achtergrond lichter. Vaak volstaat een iets donkerdere tint van dezelfde kleur.
• Gebruik de merkkleur voor vlakken, niet voor kleine tekst. Een oranje knop met witte tekst voldoet mogelijk niet; een oranje knop met donkere tekst wel.
• Leg een donkere laag (overlay) over foto's met tekst, of plaats tekst naast in plaats van op de foto.
• Definieer vaste kleurparen in je huisstijl en websitevariabelen. Zie Huisstijl doorvoeren op je website.

Niet alleen contrast: kleur als enige signaal

Ook met voldoende contrast kan kleur een probleem zijn als het de enige manier is waarop je iets laat zien. WCAG vraagt dat informatie niet alleen via kleur wordt overgebracht. Denk aan:

• Links in lopende tekst die alleen door kleur opvallen. Een onderstreping lost dit op.
• Foutmeldingen in formulieren die alleen een rood kader tonen. Voeg een tekst toe die zegt wat er mis is.
• Grafieken en statussen met alleen rood en groen. Voor mensen met kleurenblindheid zijn die soms niet te onderscheiden; gebruik ook labels, patronen of iconen.

Focus en interactieve elementen

Wie met het toetsenbord navigeert, moet zien waar de focus staat. Een zichtbare focusrand met voldoende contrast tegen de achtergrond is daarvoor nodig. Veel ontwerpen verwijderen die rand omdat hij "lelijk" is; vervang hem dan door een eigen, duidelijke stijl in plaats van hem weg te halen.

Sinds juni 2025 gelden voor veel webshops en online diensten wettelijke toegankelijkheidseisen. Zie Toegankelijkheid van je website zelf controleren voor wat dat inhoudt.

Voorbeeld

Stel: een bedrijf met een lichtoranje huisstijlkleur gebruikt witte tekst op oranje knoppen. De contrastchecker geeft een verhouding onder de 3:1. Door de knoptekst donker te maken, of de knopkleur een paar tinten donkerder, voldoet de combinatie en blijft de huisstijl herkenbaar.

Veelgestelde vragen

Geldt de contrastnorm ook voor logo's?

Nee, logo's en decoratieve elementen vallen buiten de contrasteisen voor tekst.

Is meer contrast altijd beter?

Tot een bepaald punt. Puur zwart op fel wit kan voor sommige lezers vermoeiend zijn; donkergrijs op wit voldoet ruim en leest prettig.

Telt contrast mee voor SEO?

Niet direct als rankingfactor, maar slecht leesbare tekst leidt tot slechtere gebruikservaring.

Hoe zit het met een donkere modus?

Controleer beide weergaven. Een combinatie die in lichte modus voldoet, hoeft dat in donkere modus niet te doen.

Wat als mijn huisstijlkleur nooit voldoet als tekstkleur?

Gebruik hem dan voor vlakken, lijnen en grote koppen, en kies voor lopende tekst een donkerdere kleur.

Hulp nodig?

Wil je een ontwerp dat mooi én goed leesbaar is? Bekijk onze aanpak voor UX/UI-design.

Bepaal in je huisstijl vaste combinaties van tekst- en achtergrondkleur die aan de norm voldoen. Dan hoeft niemand er bij elke pagina opnieuw over na te denken.