Nieuw in WCAG 2.1
Succescriterium 1.4.11 Contrast van niet-tekstuele content
De visuele weergave van het volgende heeft een contrastverhouding van ten minste 3:1 ten opzichte van aangrenzende kleuren:
- Componenten van de gebruikersinterface: 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 de component wordt bepaald door de user agent en niet wordt aangepast door de auteur;
- 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.
Contrast van niet-tekstuele content begrijpen (Engelstalig)
Niet-tekstuele onderdelen met te weinig contrast zijn een probleem voor iedereen, maar vooral mensen die slechtziend of kleurenblind zijn kunnen deze onderdelen niet (of niet goed) zien. Gebruik daarom voor niet-tekstuele een contrastverhouding die hoog genoeg is.
Succescriterium 1.4.11 stelt een minimale eis van 3:1 aan de contrastverhouding.
Onder niet-tekstuele bedieningselementen vallen formulierelementen, maar ook iconen die een link of knop zijn. De contrasteis geldt ook voor de statussen van deze bedieningselementen (zoals hover of focus).
Onder grafische objecten vallen afbeeldingen zoals diagrammen, grafieken en informatieve iconen.
Uitzonderingen zijn:
- bedieningselementen die inactief zijn
- elementen die puur decoratief zijn
- elementen waarvan de weergave wordt bepaald door de browser en niet wordt aangepast door de auteur
- elementen waarvan een specifieke weergave essentieel is, zoals onderdelen van een logo of merknaam
Hoe pas je dit toe?
- Gebruik een contrastverhouding van minimaal 3:1 voor niet-tekstuele bedieningselementen.
- Gebruik een contrastverhouding van minimaal 3:1 voor statussen van niet-tekstuele bedieningselementen.
- Gebruik een contrastverhouding van minimaal 3:1 voor grafische objecten.
Contrast meten
Contrastverhouding is het verschil in helderheid tussen twee kleuren.
Test zelf de contrastverhouding van de kleuren van je website eens met Colour Contrast Analyser (CCA). Beschikbaar voor Windows en Mac. Of gebruik de contrast checker op de website van WebAIM.
Voor wie is dit belangrijk?
- Mensen die slechtziend of kleurenblind zijn.
Wie is verantwoordelijk?
- Redacteur
- Vormgever
Bronnen
- WCAG 2.2 – Succescriterium 1.4.11 Contrast van niet-tekstuele content
- Download Colour Contrast Analyser (CCA)