Ga naar hoofdinhoud

WCAG

WCAG-succescriterium 1.4.11 Contrast van niet-tekstuele content

Niveau AA

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

Bronnen en tools

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 het 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 het component niks dat het component identificeert? Dan moet het 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

Belangrijk: De richtlijnen van NL Design System zijn geen wettelijke verplichting

De richtlijnen van NL Design System zijn niet wettelijk verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

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