Kleurcontrast controleren – waarom het zo belangrijk is voor WCAG
Een van de meest voorkomende toegankelijkheidsproblemen op websites is onvoldoende kleurcontrast. Grijs op wit, lichtblauw op beige – het ziet er misschien subtiel en stijlvol uit, maar voor mensen met een visuele beperking of kleurenblindheid kan het onleesbaar zijn.
Wat zegt WCAG over kleurcontrast?
Volgens WCAG 2.1 niveau AA moet de contrastverhouding tussen tekst en achtergrond minimaal 4,5:1 zijn voor normale tekst. Voor grote tekst (18pt of 14pt bold) geldt een minimum van 3:1. Voor niveau AAA gelden strengere eisen van 7:1 respectievelijk 4,5:1.
Wat is een contrastverhouding?
De contrastverhouding is een berekening op basis van de relatieve helderheid van twee kleuren. Zwart op wit heeft een verhouding van 21:1 – het maximale contrast. Lichtgrijs op wit scoort snel onder de 2:1 – onvoldoende voor wie moeite heeft met lezen.
Veelgemaakte fouten
- Lichtgekleurde subtiteltekst of helptekst bij formuliervelden
- Grijze placeholder-tekst in invoervelden
- Lichte linkkleur op witte achtergrond
- Witte tekst op lichtgekleurde knoppen
Hoe controleert u dit?
Er zijn gratis browsertools en extensies om kleurcontrast te meten. Maar een volledige controle van alle tekst op alle pagina's doet u niet handmatig. Een geautomatiseerde scan geeft snel een overzicht van alle contrastproblemen op uw website.