Kleurcontrast en toegankelijkheid: WCAG-normen, testen en oplossen

Lichtgrijze tekst op een witte achtergrond ziet er strak uit in een ontwerpbestand. Op een telefoon in fel zonlicht, of voor iemand die slechtziend is, is die tekst moeizaam te lezen. Het is ook de meest voorkomende toegankelijkheidsfout die er is: de scan WebAIM Million 2026 (opent in een nieuw tabblad) vond tekst met te weinig contrast op 83,9% van de 1 miljoen meestbezochte homepages, gemiddeld 34 keer per pagina.

Het goede nieuws: contrast is meetbaar, de grenswaarden zijn duidelijk en de oplossingen zijn meestal goedkoop. Deze gids geeft u de getallen, de gratis tools en een manier om merkkleuren te verbeteren zonder opnieuw te beginnen.

Wat is een contrastverhouding?

Een contrastverhouding is een getal dat de relatieve helderheid (luminantie) van twee kleuren vergelijkt, meestal die van tekst en achtergrond. WCAG berekent het met een vaste formule, en de uitkomst loopt van 1:1 (geen verschil, wit op wit) tot 21:1 (zwart op wit). Hoe hoger het getal, hoe makkelijker de twee kleuren uit elkaar te houden zijn.

De formule is (L1 + 0,05) / (L2 + 0,05), waarbij L1 de relatieve luminantie van de lichtere kleur is en L2 die van de donkerdere. U hoeft het nooit zelf uit te rekenen, maar één detail doet ertoe: alleen luminantie telt, niet de kleurtoon. Daarom kan rode tekst op een groene achtergrond er fel uitzien en toch slecht scoren.

Het andere detail dat vaak wordt gemist, is afronden. Het Understanding-document van het W3C bij 1.4.3 (opent in een nieuw tabblad) zegt dat berekende waarden “niet mogen worden afgerond (4,499:1 haalt bijvoorbeeld de grens van 4,5:1 niet)”. Grijs #767676 op wit (4,54:1) slaagt dus, terwijl #777777 op wit (4,48:1) zakt, al kan niemand ze met het blote oog uit elkaar houden.

Welke contrastverhouding eist WCAG?

Voor niveau AA, waar de meeste wetten en contracten naar verwijzen, heeft gewone tekst een contrastverhouding van ten minste 4,5:1 met de achtergrond nodig en grote tekst ten minste 3:1 (succescriterium 1.4.3). Onderdelen van de gebruikersinterface en betekenisvolle afbeeldingen hebben 3:1 nodig ten opzichte van aangrenzende kleuren (1.4.11). Het strengere niveau AAA vraagt om 7:1 voor gewone tekst en 4,5:1 voor grote tekst (1.4.6).

Waarom 4,5:1? Het W3C legt uit dat die waarde “het verlies aan contrastgevoeligheid compenseert dat gebruikers met een visusverlies van ongeveer 20/40 doorgaans hebben”, wat neerkomt op een gezichtsscherpte van ongeveer 0,5. De waarde is dus afgestemd op mensen die matig slechter zien, onder wie veel oudere klanten die zichzelf nooit gehandicapt zouden noemen.

Sommige tekst is uitgezonderd: logo's en merknamen, puur decoratieve tekst, tekst die voor niemand zichtbaar is, tekst in een afbeelding met veel andere beeldinhoud en tekst in inactieve (uitgeschakelde) bedieningselementen. Uw logo mag blijven zoals het is. Een alinea in de bleke kleur van uw logo niet.

Wat telt als grote tekst?

Grote tekst betekent in WCAG ten minste 18 punt, of ten minste 14 punt als de tekst vet is. Het W3C rekent dat om naar ongeveer 24 CSS-pixels en 18,5 pixels vet. Alles wat kleiner is, heeft de volle 4,5:1 nodig. Broodtekst, bijschriften, formulierlabels, prijzen en links in de footer zijn bijna nooit grote tekst, dus die hebben de hogere verhouding nodig.

Zo pakt dat uit: grijs #949494 op wit scoort 3,03:1. Dat is prima voor een kop van 28 pixels en een fout voor een alinea van 16 pixels in dezelfde kleur. Heel wat sites slagen op hun koppen en zakken op alles daaronder.

Dunne en decoratieve lettertypen vragen extra aandacht. Het W3C merkt op dat door anti-aliasing “bijzonder dunne of ongewone lettertypen door browsers met een veel lichtere kleur kunnen worden weergegeven” dan de kleur die u koos. Is uw huislettertype een dunne variant, houd dan wat marge boven 4,5:1 in plaats van op 4,51:1 te mikken.

Geldt contrast ook voor knoppen, pictogrammen, focusindicatoren en grafieken?

Ja. Volgens succescriterium 1.4.11 (niveau AA) heeft alles wat mensen moeten zien om een bedieningselement, de status ervan of een afbeelding te herkennen, 3:1 nodig ten opzichte van de kleuren ernaast. Dat geldt voor randen van formuliervelden, pictogrammen zonder tekstlabel, focuskaders, statussen van selectievakjes en schakelaars, en de lijnen en segmenten van grafieken. Tekst in een knop heeft nog steeds 4,5:1 nodig.

• Formuliervelden: een lichtgrijze rand #CCCCCC op wit scoort 1,61:1. Is dat vage lijntje het enige dat laat zien waar u moet typen, dan zakt het.
• Knoppen: WCAG eist geen zichtbare rand rond elke knop. Het Understanding-document van het W3C bij 1.4.11 (opent in een nieuw tabblad) zegt dat een begrenzing alleen nodig is als het element op geen andere visuele manier te herkennen is. Is een knop alleen herkenbaar aan zijn gekleurde vorm, dan heeft die vorm 3:1 nodig ten opzichte van de pagina.
• Pictogrammen: een zoekvergrootglas, een hartje voor de verlanglijst of een winkelwagenicoon zonder tekst ernaast heeft 3:1 nodig.
• Focusindicatoren: het kader dat de toetsenbordfocus toont, moet contrasteren met de achtergrond eromheen. Onze gids over WCAG 2.2 behandelt de nieuwere criteria over focus.
• Grafieken: lijnen in een lijngrafiek en segmenten van een taartdiagram hebben 3:1 nodig, tenzij dezelfde waarden ook als tekst worden getoond.
• Uitgeschakelde bedieningselementen zijn uitgezonderd, al moeten mensen nog steeds kunnen zien of een knop werkt.

Links in lopende tekst zijn een apart geval. Worden ze alleen met kleur aangeduid, zonder onderstreping, dan vraagt W3C-techniek G183 (opent in een nieuw tabblad) om 3:1 tussen de linkkleur en de omringende tekst, terwijl beide nog steeds 4,5:1 met de achtergrond nodig hebben. Drie kleuren vinden die aan dat alles voldoen, is lastig. Een onderstreping is veel makkelijker.

Hoe controleer ik het kleurcontrast?

Gebruik een gratis contrastchecker voor losse kleurparen, de ontwikkelaarstools van uw browser voor live pagina's en een automatische scan om probleemplekken op de hele site te vinden. Controleer daarna met uw eigen ogen wat tools missen: tekst over foto's en kleurverlopen, hover- en focusstatussen, placeholdertekst en foutmeldingen. Het meeste kost een paar minuten per paginatemplate.

• WebAIM Contrast Checker (opent in een nieuw tabblad): voer twee hexcodes in en u krijgt de verhouding, met geslaagd of gezakt voor gewone tekst, grote tekst en grafische objecten. Met de schuifregelaar voor lichtheid vindt u snel de dichtstbijzijnde tint die wel slaagt.
• Colour Contrast Analyser (opent in een nieuw tabblad): een gratis desktopapp van Vispero voor Windows en macOS. De pipet pakt elke pixel op het scherm, handig voor tekst over afbeeldingen, in pdf's en in apps, en er zit een simulator voor kleurenblindheid in.
• Chrome DevTools: inspecteer een stuk tekst en open de kleurkiezer. Het onderdeel over de contrastverhouding (opent in een nieuw tabblad) toont lijnen voor AA en AAA en kan een kleur voorstellen die slaagt. Het paneel CSS Overview somt alle contrastproblemen op de pagina op.
• Automatische checkers: browserextensies en Lighthouse markeren tekst met te weinig contrast op een hele pagina, maar zetten tekst over afbeeldingen of kleurverlopen vaak op “handmatig controleren” in plaats van hem te laten slagen of zakken.

Waar tools tekortschieten, meet u handmatig. Voor tekst op een grote headerfoto controleert u het lichtste deel van de afbeelding achter de lichtste letters; het W3C noemt achtergrondafbeeldingen zonder voldoende contrast als bekende fout (F83). Beweeg over knoppen, tab ernaartoe, roep een formulierfout op en schakel naar de donkere modus als u die aanbiedt. Een donker thema kan ook zakken: grijs #757575 op een achtergrond van #121212 scoort 4,07:1. Onze gids over hoe u de toegankelijkheid van uw website test behandelt contrast samen met de andere snelle handmatige controles.

Hoe los ik te weinig contrast op zonder mijn merk te veranderen?

Meestal door een donkerdere tint van uw merkkleur toe te voegen voor tekst en kleine elementen, en het origineel te houden voor grote koppen, achtergronden en illustraties. Veel merkkleuren zakken alleen op kleine formaten. Witte tekst op een lichte merkkleur vervangen door donkere tekst is vaak al genoeg, en de meeste bezoekers merken alleen dat de pagina makkelijker leest.

1. Maak van elke merkkleur een tekstveilige versie, met ten minste 4,5:1 ten opzichte van uw belangrijkste achtergronden, en gebruik die voor broodtekst, links en kleine pictogrammen.
2. Gebruik de felle originele kleur voor grote koppen (daar is 3:1 genoeg), achtergronden, illustraties en decoratie.
3. Zet op lichte merkkleuren de knoptekst om van wit naar donker.
4. Leg een dicht of halfdoorzichtig vlak achter tekst die op foto's staat.
5. Controleer elke status: hover, focus, bezocht, geselecteerd, fout en placeholder.
6. Sla de kleurparen die slagen op als design tokens of thema-instellingen, zodat nieuwe pagina's ze overnemen in plaats van ze opnieuw uit te vinden.

Ontwerpen voor kleurenblindheid: waarom kleur alleen niet genoeg is

Contrast en kleur zijn twee verschillende problemen. Ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen heeft een vorm van kleurenblindheid, meestal rood-groen, volgens Colour Blind Awareness (opent in een nieuw tabblad). WCAG 1.4.1 (opent in een nieuw tabblad) (niveau A) zegt dat kleur niet de enige visuele manier mag zijn om informatie over te brengen, dus combineer kleur met tekst, pictogrammen, patronen of onderstrepingen.

• Formulierfouten: alleen een rode rand is niet genoeg. Zet een melding zoals “Vul een postcode in” naast het veld, liefst met een pictogram.
• Voorraad en status: een groen of rood bolletje naast een product zegt veel kopers niets. Schrijf “Op voorraad” of “Uitverkocht”.
• Grafieken: een legenda waarbij u kleuren moet koppelen, is lastig te lezen. Zet labels direct bij de lijnen of gebruik patronen en verschillende lijnstijlen.
• Links: onderstreep ze in lopende tekst, om de redenen hierboven.

Wilt u het probleem zelf zien, dan kunnen de DevTools van Chrome kleurzienstoornissen nabootsen, en ook de Colour Contrast Analyser heeft een simulator. Contrast helpt hier ook: de verhouding meet lichtheid, niet kleurtoon, dus twee kleuren met een sterke verhouding blijven van elkaar te onderscheiden, ook als hun tinten op elkaar lijken. Hoe slechtziende mensen en mensen met andere beperkingen hun apparaten instellen, leest u in hoe mensen met een beperking het web gebruiken.

Zijn hogecontrastmodi en contrastknoppen genoeg?

Nee. Contrastthema's van het besturingssysteem en contrastknoppen op de pagina helpen mensen die weten dat ze meer contrast nodig hebben en het aanzetten. WCAG beoordeelt uw pagina echter in de standaardstand, dus de kleuren die elke bezoeker als eerste ziet, moeten nog steeds slagen. Een knop is een extra optie voor wie meer wil, geen oplossing voor kleuren die zakken.

Sommige mensen met een beperking gebruiken de contrastthema's van Windows, die uw kleuren vervangen door hun eigen kleuren. Het loont om uw site daarmee te testen: pictogrammen die uit achtergrondafbeeldingen bestaan, kunnen verdwijnen, en focusstijlen die alleen met een box-shadow zijn getekend ook. Met de CSS-mediaquery prefers-contrast kunt u bovendien een versie met meer contrast aanbieden aan mensen die daar in hun systeeminstellingen om hebben gevraagd.

Onze eigen widget heeft een contrastaanpassing en een profiel voor kleurenblindheid, en sommige bezoekers vinden die nuttig. Toch zouden we u hetzelfde zeggen: is uw broodtekst #999999 op wit, pas dan de CSS aan. De widget geeft een bezoeker die meer contrast wil een manier om dat te krijgen. Standaardkleuren die zakken, laat hij niet slagen, en de Engelstalige WCAG-referentie in onze documentatie zegt dat ook.