Voldoende kleurcontrast bepaalt of tekst voor iedereen leesbaar blijft: ook bij slechtziendheid, fel zonlicht of schermen van mindere kwaliteit. Met de Kleurcontrast controleren (WCAG) controleert u twee kleuren in seconden tegen de Richtlijnen voor Toegankelijkheid van Webcontent (WCAG 2.1). Deze handleiding legt de formule, de drempels en een veelvoorkomend grensgeval uit de praktijk uit.
Hoe de contrastverhouding wordt berekend
De contrastverhouding beschrijft het helderheidsverschil tussen de voorgrond- en achtergrondkleur. Ze wordt afgeleid uit de relatieve luminantie L van beide kleuren:
Contrastverhouding = (L_licht + 0,05) / (L_donker + 0,05)
Hierbij is L_licht de relatieve luminantie van de lichtere kleur en L_donker die van de donkere (WCAG 2.1). De relatieve luminantie weegt de rode, groene en blauwe componenten volgens de menselijke waarneming. De waarden lopen van 1:1 (geen contrast, identieke kleuren) tot 21:1, het maximum voor puur zwart op puur wit.
De WCAG-drempels voor AA en AAA
WCAG onderscheidt twee conformiteitsniveaus (AA, AAA) en twee tekstgroottes. "Grote tekst" betekent vanaf 18 pt of vanaf 14 pt vet. Kleinere en normaal gewogen tekst geldt als normale tekst.
| Eis | Normale tekst | Grote tekst |
|---|---|---|
| WCAG AA | ≥ 4,5:1 | ≥ 3:1 |
| WCAG AAA | ≥ 7:1 | ≥ 4,5:1 |
AA is het minimumniveau dat door de meeste wetten en aanbestedingen wordt vereist, terwijl AAA de veeleisender aanbeveling is. Grote tekst mag een lager contrast hebben, omdat dikkere lettervormen ook bij een kleiner verschil leesbaar blijven.
Voorbeeld: een krap grensgeval
Een veelgemaakte fout is middengrijs voor lopende tekst. Puur grijs #777777 op een witte achtergrond levert een contrastverhouding van ongeveer 4,48:1 op. Dat blijft net onder de AA-drempel van 4,5:1 en is dus niet toegankelijk voor lopende tekst, ook al lijkt het op het eerste gezicht voldoende. Pas een iets donkerder grijs haalt de vereiste 4,5:1. Juist dit soort grensgevallen legt de calculator betrouwbaar bloot.
Zo voert u de controle uit
Voer de voorgrond- en achtergrondkleur in als hex-waarden, bijvoorbeeld #333333 op #FFFFFF. De calculator geeft de verhouding terug en toont voor elke combinatie van niveau en tekstgrootte of ze geslaagd is. Controleer tekstkleuren altijd tegen de werkelijke achtergrond, ook bij knoppen, links in de hover-toestand en tekst over afbeeldingen. Zo zorgt u ervoor dat uw ontwerp niet alleen aantrekkelijk is, maar aantoonbaar toegankelijk.
