Uitleg

Zorg voor voldoende kleurcontrast tussen de kleur van componenten die visueel betekenis hebben en hun directe omgeving.

Bijvoorbeeld:

• Een icoon dat betekenis heeft, zoals de 3 streepjes voor een menu of een pijltje naar rechts voor de volgende pagina.
• Een icoon dat de status aangeeft van een bericht zoals een oranje driehoek voor een waarschuwing en een groen vinkje voor succes.
• Een rode rand die aangeeft dat een invoerveld fouten bevat (als aanvulling op de foutmelding in tekst).

Het gemeten kleurcontrast tussen het element en de omgeving moet minstens 3:1 zijn. Dit is te controleren met de Contrast checker.

Gerelateerde NL Design System-richtlijnen

• Stijl: Kleuren.
• Formulieren: Visueel ontwerp.
• Content: Afbeeldingen.
• Content: Kleurgebruik in tekst.

Bronnen en tools

• Een overzicht van goede bronnen en tools voor kleurcontrast staat bij Richtlijnen NL Design System voor kleuren.
• Figma contrast accessibility plugin tools.
• axe DevTools browser add-on.
• WAVE Web Accessibility Evaluation Tools.
• Colour Contrast Analyser (CCA).
• Contrast van kleuren - NL Design System.

Hoe te testen

Naast tekst (WCAG-succescriterium 1.4.3 Contrast (minimum)) moet ook andere essentiele content goed zichtbaar zijn.

Dit kan bijvoorbeeld gaan om grafische objecten, zoals iconen en delen van complexe diagrammen. Het contrast van het (deel van het) icoon dat nodig is voor begrip, moet een contrast van 3:1 hebben met de directe omgeving.

Het kan ook gaan om een component van de gebruikersinterface, zoals een link, een knop of een formulier element. Dan moet de visuele informatie die nodig is om de component (of de status ervan) te identificeren een contrast van 3:1 hebben met de directe omgeving.

Let op: Als een component van de gebruikersinterface een tekst bevat, dan moet deze tekst (WCAG-succescriterium 1.4.3 Contrast (minimum)) voldoen aan de contrasteisen van tekst, en mag de knop onopvallend zijn. Als deze een afbeelding bevat, dan is successcriterium 1.4.11 van toepassing op de afbeelding. Bevat de component niks dat de component identificeert? Dan moet de component zelf contrastrijk genoeg zijn.

Let op: Controleer het kleurcontrast altijd in de gegenereerde webpagina in een browser en niet alleen in de code zelf. Linters kunnen helpen om laaghangend fruit te ondervangen, maar de eindtest voor kleurcontrast moet gebeuren op de webpagina zelf als alle componenten worden samengevoegd tot één geheel.

Controleer in de volgende situaties of het kleurcontrast van de componenten voldoende blijft:

• Verschillende gebruikelijke schermgroottes inclusief mobiele weergave.
• Verschillend oriëntaties: portrait en landscape.
• Vergroot de tekst alleen tot 200%.
• Zoom in tot 400% vanaf schermbreedte van 1280px (of zet de schermbreedte op 320px).
• Is er een dark mode aanwezig? Test ook hier het kleurcontrast van de componenten.
• Controleer de verschillende weergaves en statussen van buttons, menus en de links zoals: met toetsenbordfocus, als je er overheen hovert met de muis, ingedrukt, en al eerder bezocht.
• Vergeet ook de skiplinks niet.

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

W3C referenties

• Engelse tekst van het WCAG-succescriterium: 1.4.11 Non-text Contrast.
• Nederlandse vertaling van het WCAG-succescriterium: 1.4.11 Contrast van niet-tekstuele content.
• Engelstalige informatie op How to Meet WCAG: Quick Reference 1.4.11 Non-text Contrast.
• Engelstalige toelichting: Understanding SC 1.4.11 Non-text Contrast.

Help richtlijn verbeteren

Aanvullingen of opmerkingen?

Deze pagina’s over WCAG worden onderhouden door NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.