Kleurcontrast: waarom het belangrijker is dan je denkt

Wat betekent "voldoende contrast"?

Kleurcontrast is de mate waarin tekst zich onderscheidt van zijn achtergrond. WCAG 2.2 (niveau AA) vraagt om een contrastverhouding van minimaal 4,5:1 voor normale tekst, en 3:1 voor grote tekst (vanaf ongeveer 24px, of 19px vetgedrukt) en voor belangrijke UI-elementen zoals knoprandjes en invoervelden.

Waarom het meer mensen raakt dan je denkt

Kleurcontrast wordt vaak gezien als een probleem voor een kleine groep. In de praktijk raakt het veel meer mensen:

• Mensen met een visuele beperking of slechtziendheid.
• Mensen met kleurenblindheid — dit komt voor bij ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen.
• Iedereen die buiten, in fel zonlicht, op een telefoon kijkt.
• Mensen met een ouder of goedkoper scherm, waar kleuren minder scherp worden weergegeven.

Voldoende contrast is dus geen nicheverbetering — het is een verbetering die vrijwel elke bezoeker raakt, in elk geval af en toe.

Hoe je het test

De meeste moderne browsers hebben ingebouwde ontwikkelaarstools waarmee je de contrastverhouding van tekst direct kunt aflezen. Voor een volledige website-doorlichting combineren wij dit met geautomatiseerde controles in onze accessibility scan, zodat je niet zelf elk element hoeft te controleren.

De meestgemaakte fout: kleur als enige signaal

Zelfs met perfect contrast blijft één valkuil vaak onopgemerkt: informatie die alléén met kleur wordt overgebracht. Een foutmelding die uitsluitend rood is gekleurd, of een grafiek die statussen enkel via kleur onderscheidt, is voor mensen met kleurenblindheid niet te interpreteren.

Combineer kleur daarom altijd met tekst, een icoon of een ander visueel kenmerk. Op deze website passen we dat principe zelf ook toe: elk resultaat in onze voorbeeldscan heeft een icoon én een tekstlabel, naast de kleur.

Contrast is het makkelijkste WCAG-criterium om te overtreden — en vaak het makkelijkste om te herstellen.