Inzichten
WCAG-kleurcontrast: welke ratio heb je nodig?
Kleurcontrast is het eerste waar de meeste sites op struikelen, en het makkelijkst te meten onderdeel van WCAG. Hier zijn de exacte cijfers, wanneer welke eis geldt, en hoe je het snel checkt.
De cijfers
Normale tekst heeft op niveau AA een contrastratio van minimaal 4,5:1 nodig ten opzichte van de achtergrond. Op niveau AAA wordt dat 7:1.
Grote tekst, vanaf 24px of 18,66px vetgedrukt, mag met minder toe: 3:1 op AA, 4,5:1 op AAA. Grotere letters zijn simpelweg makkelijker te onderscheiden bij minder contrast.
UI-componenten zoals knoprandjes, formuliervelden en focus-indicators hebben een eigen eis van 3:1 tegen hun omgeving. Dit valt onder een apart succescriterium (1.4.11) en geldt alleen op AA.
Waarom deze getallen
De ratio's zijn niet willekeurig: ze zijn gebaseerd op onderzoek naar leesbaarheid voor mensen met slechtziendheid, een aandoening die met de leeftijd bij vrijwel iedereen toeneemt. Bij fel zonlicht op een telefoonscherm profiteert overigens iedereen van hoger contrast, niet alleen mensen met een visuele beperking.
Veelgemaakte fouten
Grijze tekst op een witte achtergrond is de klassieker: #999999 op wit haalt maar 2,85:1, ruim onder de eis. Placeholder-tekst in formulieren heeft vaak hetzelfde probleem.
Tekst over een afbeelding heen is lastig te garanderen, omdat het contrast per plek in de afbeelding verschilt. Een donkere overlay of een vast kleurvlak achter de tekst lost dit consistent op.
Merkkleuren zijn een terugkerend obstakel: een pastel- of felle huisstijlkleur haalt vaak het vereiste contrast niet als tekstkleur. De oplossing is meestal een iets donkerdere of lichtere variant van diezelfde kleur specifiek voor tekst, niet de merkkleur zelf.
Veelgestelde vragen
Goede Vragen
Verwachtingen scherp voordat we starten, met een eerlijk proces en heldere antwoorden.
Nee, logo's en louter decoratieve tekst zijn uitgezonderd van de contrasteis (WCAG-criterium 1.4.3 noemt dit expliciet als uitzondering).
Voor losse kleurcombinaties gebruik je een contrastchecker; voor een hele pagina helpt de automatische audit in Chrome DevTools (Lighthouse) als eerste scan, al mist die contrast in afbeeldingen en dynamische states zoals hover.
Ja, elke kleurcombinatie die een bezoeker daadwerkelijk kan zien moet voldoen, dus licht- en donker-modus allebei apart checken als je site beide aanbiedt.
Contact
Zeg Hallo
Heb je een project in gedachten? Vertel me er iets over, dan reageer ik binnen een dag.