Hoe kleurcontrast controleren voor toegankelijkheid
Ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen hebben een vorm van kleurenzicht-deficiëntie. Miljoenen anderen hebben lage visie, een verouderend zicht of bekijken hun scherm in fel zonlicht. Als uw tekst niet voldoende contrast heeft met zijn achtergrond, kunnen deze mensen het niet lezen.
Kleurcontrast is geen « extra » — het is een centrale toegankelijkheidsvereiste.
Wat WCAG vereist
De Web Content Accessibility Guidelines (WCAG) definiëren minimale contrastverhoudingen tussen tekst en achtergrond:
| Niveau | Normale tekst | Grote tekst | Niet-tekstuele elementen |
|---|---|---|---|
| AA (minimum) | 4,5 : 1 | 3 : 1 | 3 : 1 |
| AAA (versterkt) | 7 : 1 | 4,5 : 1 | — |
« Grote tekst » betekent 18 px vet of 24 px regulier en groter.
De contrastverhouding gaat van 1 : 1 (geen contrast — wit op wit) tot 21 : 1 (maximaal contrast — zwart op wit).
Hoe contrast te controleren
- Selecteer uw kleuren — voer de tekstkleur (voorgrond) en die van de achtergrond in via HEX-codes, RGB-waarden of selectors.
- Bekijk de resultaten — de tool toont direct de contrastverhouding en of uw combinatie WCAG AA en AAA passeert in normale en grote tekst.
- Pas aan indien nodig — als het contrast faalt, maak de tekst donkerder of de achtergrond lichter (of omgekeerd) totdat het vereiste niveau is bereikt.
Veelvoorkomende contrast-fouten
Lichtgrijze tekst op wit — #999999 op #ffffff heeft een verhouding van slechts 2,8 : 1. Dit faalt bij WCAG AA. Het kan « strak » lijken voor een designer met perfect zicht, maar het is onleesbaar voor velen.
Gekleurde tekst op gekleurde achtergrond — een blauwe knop met witte tekst passeert vaak, maar een groene knop met witte tekst niet. Verifieer altijd — men kan een contrastverhouding niet met het oog beoordelen.
Hint-tekst — hint-teksten van velden zijn berucht zwak in contrast. Hoewel WCAG ze niet strikt oplegt, moeten gebruikers ze toch kunnen lezen.
Donkere modus — designers gebruiken vaak gemiddeld grijs op donkergrijs voor een « subtiele » look. Dit faalt vaak bij contrastcontroles.
Tips
- Controleer elke tekst/achtergrond-combinatie — neem niets aan. Zelfs ervaren designers worden verrast door combinaties die falen.
- Test beide thema's — als uw site een lichte en een donkere modus heeft, controleer het contrast in beide. Een kleur die werkt op wit kan falen op donkergrijs.
- Gebruik uw merkkleuren met onderscheid — als uw merkblauw faalt als tekstkleur, gebruik het voor grotere elementen (knoppen, koppen) waar de drempel « grote tekst » (3 : 1) van toepassing is, en gebruik een donkerdere tint voor de tekstinhoud.
- Vertrouw niet alleen op kleur — naast voldoende contrast, breng nooit informatie over door alleen kleur. Gebruik pictogrammen, labels of patronen als aanvulling.
Veelgestelde vragen
Welke contrastverhouding nastreven?
Voor normale tekst, streef minstens 4,5 : 1 (WCAG AA) na. Voor grote tekst (18 px vet of 24 px regulier), volstaat 3 : 1. Voor het hoogste toegankelijkheidsniveau (AAA), streef 7 : 1 na voor normale tekst.
Geldt dit alleen voor tekst?
Nee. WCAG 2.1 vereist ook voldoende contrast voor interface-componenten en grafische objecten (pictogrammen, veldranden, focus-indicatoren). Het minimum voor niet-tekstuele elementen is 3 : 1.
En in donkere modus?
Donkere modus vereist dezelfde contrastcontroles. Witte tekst op donkere achtergrond passeert vaak gemakkelijk, maar grijze tekst op donkergrijze achtergrond faalt vaak. Test beide modi.
Is kleurcontrast een wettelijke vereiste?
In veel rechtsgebieden, ja. ADA (US), EN 301 549 (EU) en vergelijkbare wetten leggen digitale toegankelijkheid op. WCAG-conformiteit is de erkende standaard om hieraan te voldoen.