Onderdelen van de interface en grafische objecten moeten een contrastverhouding van ten minste 3:1 hebben ten opzichte van de aangrenzende kleuren.
Waarom is een goed contrast zo belangrijk?
Een hoog contrast zorgt ervoor dat kleurenblinden en slechtzienden iconen en andere niet-tekstuele onderdelen gemakkelijker kunnen zien en herkennen. Veel mensen bekijken je website op een smartphone met een klein (of minder kwalitatief) scherm en/of in slechte lichtomstandigheden. Dit succescriterium helpt hen ook.
WCAG definieert onderdelen van de interface en grafische objecten als volgt.
Onderdelen van de interface
“Visuele informatie die vereist is om componenten van de gebruikersinterface en statussen te identificeren, met uitzondering van inactieve componenten of componenten waarvan de weergave van het component wordt bepaald door de user agent en niet wordt aangepast door de auteur.”
Voorbeeld
In de meeste browsers heeft de weergave van een inactieve knop die niet vormgegeven is met CSS (zoals ) een contrastverhouding die lager is dan 3:1. Dat is echter geen inbreuk op dit succescriterium omdat de browser — of de user agent — in dit geval bepaalt hoe een inactief component eruitziet.
Grafische objecten
“Delen van afbeeldingen die vereist zijn om de content te begrijpen, behalve wanneer een specifieke weergave van afbeeldingen essentieel is voor de informatie die wordt overgebracht.”
Voorbeeld
In een infografiek moeten de kleuren van iconen en andere afbeeldingen een contrastverhouding hebben van minstens 3:1 ten opzichte van de aangrenzende kleuren. De uitzondering geldt (vanzelfsprekend) voor situaties waarin je kleurstalen wilt weergeven (zoals in een webshop), vlaggen van landen of logo’s.
Zelf testen?
In het kennisartikel Gebruik voldoende contrast lees je hoe je de contrastverhouding zelf kunt meten.