Contrast Ratio

Contrast ratio is de verhouding tussen de helderheid van de lichtste en de donkerste kleur die naast elkaar op een webpagina staan. De verhouding wordt uitgedrukt als een getal, bijvoorbeeld 4,5:1 of 7:1. Hoe hoger het getal, hoe groter het verschil tussen de kleuren en hoe beter de leesbaarheid. Voor tekst op een website geldt een minimale contrast ratio van 4,5:1 voor normale tekst en 3:1 voor grote tekst volgens de internationale toegankelijkheidsrichtlijn WCAG 2.1. Zonder voldoende contrast kunnen bezoekers met slechtziendheid, kleurenblindheid of een oudere leeftijd je tekst niet lezen, ongeacht hoe goed je content is.

Hoe contrast ratio wordt berekend en toegepast

De berekening van contrast ratio volgt een vaste formule die de relatieve luminantie van twee kleuren vergelijkt. De lichtste kleur krijgt altijd het hoogste getal in de verhouding. Een contrast ratio van 21:1 is het maximale contrast tussen zuiver wit en zuiver zwart. Een ratio van 1:1 betekent dat beide kleuren identiek zijn en dus onleesbaar. Voor webdesigners en developers bestaan tools zoals de WebAIM Contrast Checker of ingebouwde functies in Figma en Adobe XD die direct laten zien of een kleurencombinatie voldoet. Bij het ontwerpen van knoppen, formulieren en navigatie-elementen moet je niet alleen naar tekst kijken maar ook naar iconen, randen en focusindicatoren. Een veelgemaakte fout is dat ontwerpers alleen testen met perfecte beeldschermen in een goed verlichte ruimte, terwijl bezoekers je site ook op een smartphone in fel zonlicht bekijken.

Waarom contrast ratio een wettelijke en zakelijke norm werd

De richtlijnen voor contrast ratio ontstonden binnen het Web Content Accessibility Guidelines-programma van het W3C, dat sinds 1999 werkt aan toegankelijke webstandaarden. In Nederland geldt sinds 2018 de Europese Toegankelijkheidsrichtlijn voor overheidssites en vanaf 2025 ook voor veel commerciële websites van grotere bedrijven. Maar ook zonder wettelijke verplichting heeft een voldoende contrast ratio directe zakelijke waarde. Bezoekers die je tekst niet kunnen lezen klikken weg, vullen geen formulier in en bellen niet. Uit onderzoek van WebAIM blijkt dat ongeveer 86% van de homepages van grote websites nog steeds contrastverstoring heeft. Dat betekent dat je met een goed contrast ratio al beter scoort dan het merendeel van je concurrenten, zonder dat het extra budget kost.

Wat contrast ratio oplevert voor jouw website en conversie

Een correcte contrast ratio verbetert niet alleen de toegankelijkheid maar ook de gebruikservaring voor alle bezoekers. Tekst die makkelijk leesbaar is zorgt voor lagere bouncerates, langere sessieduur en hogere conversie. Bij een website laten maken of een redesign is contrast ratio een van de weinige ontwerpkeuzes die meetbare impact heeft zonder dat je content hoeft te herschrijven. In de praktijk zien we bij MKB-klanten dat vooral call-to-action-knoppen en formuliervelden vaak te weinig contrast hebben met de achtergrond. Door de kleur van een knop aan te passen van lichtgrijs naar donkerblauw kan het aantal ingevulde contactformulieren met 15 tot 20% stijgen. Daarnaast scoort een site met voldoende contrast beter in accessibility-audits, wat bijdraagt aan je positie in Google en aan je reputatie als betrouwbare partij.

Contrast ratio speelt een rol in vrijwel elk onderdeel van je website waar tekst, iconen of interactieve elementen voorkomen. Hieronder staan vier concrete situaties waarin je contrast ratio actief moet controleren en toepassen om zowel toegankelijkheid als conversie te verbeteren.

Tekst op afbeeldingen en hero-secties

Een veelvoorkomende situatie is een grote hero-afbeelding met daaroverheen een kop en een call-to-action. Als de achtergrondafbeelding lichte en donkere vlakken bevat, kan de tekst op sommige plekken onleesbaar worden. Zelfs als je een overlay gebruikt, moet je controleren of de contrast ratio overal boven de 4,5:1 blijft. In de praktijk zien we dat MKB-bedrijven vaak een mooie merkfoto kiezen maar vergeten dat de tekst op mobiel smaller wordt en dus over een ander deel van de afbeelding valt. Een oplossing is een donkere overlay met minimaal 60% dekking of een vast vlak achter de tekst. Bij een webshop laten maken is dit extra belangrijk omdat productfoto's met prijzen en kortingslabels anders onleesbaar worden op kleinere schermen.

Formulieren en invoervelden

Formulieren zijn een cruciaal conversiepunt, maar placeholdertekst en labels hebben vaak te weinig contrast. Standaard grijze placeholders in invoervelden hebben soms een contrast ratio van slechts 2:1, ver onder de norm. Dat maakt het lastig om te zien welk veld je moet invullen, vooral voor oudere bezoekers of mensen met visuele beperkingen. Zorg dat labels altijd een donkere kleur hebben en dat foutmeldingen niet alleen in rood worden getoond maar ook met een duidelijk icoon en voldoende contrast. Een praktisch voorbeeld: een B2B-dienstverlener met een offerte-aanvraagformulier zag het aantal inzendingen met 18% stijgen door de labeltekst van lichtgrijs naar zwart te veranderen en de knop van pastelblauw naar donkerblauw. Dat zijn geen grote ontwerpingrepen maar wel directe omzetwinst.

Navigatie en interactieve elementen

Menu's, knoppen en links moeten niet alleen in de standaardstatus voldoende contrast hebben, maar ook in de hover-, focus- en active-status. Een veelgemaakte fout is dat de focusindicator rond een knop of link te licht is, waardoor toetsenbordgebruikers niet zien waar ze zich in de navigatie bevinden. Dat is niet alleen een toegankelijkheidsprobleem maar ook een bruikbaarheidsprobleem voor iedereen die met Tab door je site navigeert. Check daarom ook de ARIA labels en zorg dat de contrastratio van randen, onderstreping en achtergrondkleuren voldoet. Voor een website met veel pagina's of een webshop met filters is dit onderdeel van een solide SEO-strategie, omdat Google toegankelijkheid meeneemt in de ranking.

Wanneer contrast ratio de juiste keuze is en wanneer niet

Contrast ratio is altijd relevant als je tekst, iconen of interactieve elementen op je site hebt, dus feitelijk voor elke website. Er zijn echter situaties waarin je bewust kiest voor lagere contrastverhoudingen, bijvoorbeeld bij decoratieve elementen, watermerken of achtergrondpatronen die geen informatieve functie hebben. In die gevallen hoef je niet aan de 4,5:1-norm te voldoen. Let wel op dat je nooit essentiële informatie zoals prijzen, voorwaarden of instructies in een lage contrastratio plaatst. Bij twijfel: test je ontwerp met een contrast checker en laat minimaal twee mensen buiten je team de site bekijken op verschillende apparaten en in verschillende lichtomstandigheden. Zo voorkom je dat je mooie ontwerp onbruikbaar is voor een deel van je doelgroep.