Campus Design System

Appearance

1.4.11 Non-tekst Contrast (Non-text Contrast) niveau AA ​

Uitleg ​

Het WCAG-criterium 1.4.11 Non-tekst Contrast vereist dat visuele elementen zoals knoppen, formuliercomponenten, grafieken, en andere interactieve of informatieve objecten voldoende contrast hebben met de achtergrond. Dit maakt deze elementen zichtbaar en herkenbaar, ook voor gebruikers met beperkte zichtbaarheid, kleurenblindheid, of andere visuele beperkingen.

De richtlijn stelt een contrastverhouding van minstens 3:1 voor niet-tekstuele elementen die belangrijk zijn voor:

  • Interactieve componenten: zoals knoppen en invoervelden.
  • Informatieve objecten: zoals grafieken, iconen, en selectievakjes.

Wat betekent dit in de praktijk? ​

In de praktijk houdt dit in dat alle visueel herkenbare en belangrijke objecten, zoals knoppen en icoontjes, voldoende contrast moeten hebben met hun directe achtergrond. Dit maakt het eenvoudiger voor gebruikers om te navigeren en visuele informatie juist te interpreteren.

Voorbeelden van te controleren items:

  • Knoppen die zichtbaar moeten zijn op een kleurachtergrond.
  • Selectievakjes en radio-knoppen in formulieren.
  • Statusindicatoren, zoals icoontjes voor waarschuwingen of foutmeldingen.
  • Actieve elementen zoals links of uitklapbare menu’s.

Waarom is dit belangrijk? ​

Goed contrast zorgt ervoor dat alle gebruikers – inclusief mensen met een visuele beperking – belangrijke onderdelen van de interface kunnen zien en gebruiken. Zonder voldoende contrast kunnen kritieke elementen onzichtbaar worden voor gebruikers, wat leidt tot verminderde toegankelijkheid en gebruiksvriendelijkheid.

Voorbeeld van het probleem ​

Een formulier bevat een knop "Versturen" met een lichtgrijze tekstkleur op een witte achtergrond. Het lage contrast maakt het moeilijk voor gebruikers met verminderd zicht om de knop te identificeren en te gebruiken.

Oplossing voor dit probleem ​

Zorg ervoor dat alle interactieve en informatieve objecten een contrastverhouding van ten minste 3:1 hebben met hun achtergrond.

css
/* Slecht voorbeeld - onvoldoende contrast */
button {
  background-color: #cccccc; /* Lichtgrijs */
  color: #ffffff; /* Wit */
}

/* Goed voorbeeld - voldoende contrast */
button {
  background-color: #333333; /* Donkergrijs */
  color: #ffffff; /* Wit */
}

In het goede voorbeeld is de kleur van de knop aangepast om aan de contrastvereisten te voldoen.

Belangrijke overwegingen ​

  • Controleer alle interactieve elementen: Zorg ervoor dat knoppen, links, en invoervelden goed zichtbaar zijn, ook voor gebruikers met contrastproblemen.
  • Focustoestanden en actieve elementen: Zorg ervoor dat elementen ook bij hover- en focus-toestanden voldoende contrast hebben.
  • Kleurenschema’s: Houd rekening met gebruikers die mogelijk kleurenblind zijn en die vertrouwen op contrast om objecten te onderscheiden.

Alternatieve benaderingen ​

  • Kleurcombinaties aanpassen: Kies kleuren met voldoende contrast die toegankelijk zijn voor gebruikers met beperkingen in kleurenzicht.
  • Achtergrondverzadiging verhogen: Voor iconen of statusindicatoren kan het helpen om de achtergrond donkerder of lichter te maken zodat het element eruit springt.

Belangrijkste punten ​

  • Zorg ervoor dat niet-tekstuele elementen een contrastverhouding van minstens 3:1 hebben met hun achtergrond.
  • Controleer interactieve componenten, iconen, en statusindicatoren op goed contrast.
  • Verbeter contrast bij hover- en focus-toestanden voor optimaal gebruik.

Tools en Hulpmiddelen ​

  • Colour Contrast Analyser: Helpt bij het bepalen van de contrastverhouding tussen een element en zijn achtergrond. Colour Contrast Analyser.
  • Accessible Color Palette Builder: Bouw kleurenschema’s die voldoen aan de contrastvereisten. Accessible Color Palette.

Betekenis voor toegankelijkheid ​

Met goed contrast worden elementen beter zichtbaar en bruikbaar voor gebruikers met visuele beperkingen, wat zorgt voor een inclusieve gebruikerservaring. Door te voldoen aan de vereisten voor niet-tekstueel contrast, wordt de website toegankelijker en gebruiksvriendelijker voor alle bezoekers.

Referenties ​