Campus Design System

Appearance

1.4.3 Contrast (Minimum) niveau AA ​

Uitleg ​

Het criterium 1.4.3 Contrast (Minimum) van WCAG 2.2 gaat over het zorgen voor voldoende contrast tussen tekst (en andere belangrijke visuele elementen) en hun achtergrond. Het doel van dit criterium is ervoor te zorgen dat gebruikers, vooral die met visuele beperkingen zoals kleurblindheid of verminderd gezichtsvermogen, de inhoud goed kunnen lezen en begrijpen. Een goed contrast verbetert de leesbaarheid en voorkomt dat tekst of elementen onzichtbaar worden tegen een achtergrond.

Wat is "voldoende contrast"? ​

Het contrast tussen tekst en achtergrond wordt gemeten met behulp van een verhouding van lichtheid en donkerheid. Het contrast moet hoog genoeg zijn om ervoor te zorgen dat de tekst zichtbaar is voor de meeste gebruikers, zelfs bij verschillende verlichting en scherminstellingen.

  • Voor normale tekst: De contrastverhouding moet minstens 4.5:1 zijn.
  • Voor grotere tekst (groter dan 18px of 14px vetgedrukt): De contrastverhouding moet minstens 3:1 zijn.

Dit betekent dat er voldoende verschil moet zijn tussen de kleur van de tekst en de kleur van de achtergrond om de leesbaarheid te garanderen.

Waarom is dit belangrijk? ​

Voor mensen met een visuele beperking (zoals kleurblindheid, cataract of maculadegeneratie) kan tekst zonder voldoende contrast moeilijk leesbaar zijn. Ook gebruikers die hun scherminstellingen hebben aangepast (bijvoorbeeld door de helderheid te verlagen of de kleurinstellingen te veranderen) kunnen problemen ondervinden zonder voldoende contrast.

Het verbeteren van het contrast maakt de inhoud toegankelijker voor een bredere groep gebruikers en helpt ervoor te zorgen dat je website voldoet aan de WCAG toegankelijkheidsstandaarden.

Voorbeeld van het probleem ​

Stel je voor dat je een website hebt met witte tekst op een lichtgrijze achtergrond. Zelfs voor mensen zonder visuele beperkingen kan dit moeilijk te lezen zijn, omdat het contrast onvoldoende is. Wanneer de tekst kleiner is of de gebruiker de helderheid van zijn scherm verlaagt, kan het nog moeilijker worden om de tekst te onderscheiden van de achtergrond.

Oplossing voor dit probleem ​

De oplossing is om te zorgen voor voldoende contrast tussen tekst en achtergrond. Dit kan worden gedaan door kleuren te kiezen die voldoende contrast bieden, bijvoorbeeld door donkerdere tekst te gebruiken op een lichtere achtergrond of vice versa.

Gebruik van webveilige kleuren die een hoge contrastverhouding bieden, kan helpen om ervoor te zorgen dat je website voldoet aan de normen van 1.4.3 Contrast (Minimum).

Voorbeeld van implementatie ​

Een manier om dit te doen is door tekst een donkere kleur te geven op een lichtere achtergrond of omgekeerd:

css
/* Goede contrastinstellingen */
body {
  color: #333333; /* Donkere tekst */
  background-color: #ffffff; /* Lichte achtergrond */
}

In dit voorbeeld is de contrastverhouding tussen de tekstkleur (#333333) en de achtergrondkleur (#ffffff) goed, omdat het contrast tussen deze twee kleuren voldoet aan de vereiste verhouding van 4.5:1 voor normale tekst.

Tools voor het controleren van contrast ​

Om te testen of je kleurkeuzes voldoen aan de WCAG 2.2-vereisten, kun je gebruik maken van contrastcheckers. Er zijn verschillende online tools beschikbaar die je helpen bij het controleren van de contrastverhouding tussen kleuren:

Met deze tools kun je de contrastverhouding van de kleuren in je ontwerp controleren en ervoor zorgen dat ze voldoen aan de richtlijnen van WCAG 2.2.

Alternatieve benaderingen ​

  • Gebruik van tekst-schaduwen: Als je achtergrondkleuren niet sterk genoeg kunnen worden aangepast zonder de esthetiek van je ontwerp te schaden, kan het toevoegen van een lichte schaduw aan de tekst helpen om de leesbaarheid te verbeteren.
css
h1 {
  color: #ffffff; /* Witte tekst */
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Schaduw om het contrast te verbeteren */
}
  • Gebruik van kleur en tekstgrootte in combinatie: Zorg ervoor dat belangrijke tekst niet alleen van kleur verschilt, maar ook voldoende groot is voor gebruikers met beperkte gezichtsvermogen.

Belangrijke overwegingen ​

  • Aangepaste thema’s en kleuren: Zorg ervoor dat gebruikers die aangepaste kleurinstellingen of thema's gebruiken (bijvoorbeeld voor kleurenblindheid) nog steeds in staat zijn om de inhoud goed te lezen.
  • Toepassing op alle tekst: De contrastvereisten gelden voor alle tekst op de website, inclusief knoppen, navigatiemenu’s, links en foutmeldingen. Het mag niet alleen beperkt zijn tot grote koppen of sectietitels.

Belangrijkste punten ​

  • Zorg ervoor dat de contrastverhouding tussen tekst en achtergrond minstens 4.5:1 is voor normale tekst en minstens 3:1 voor grotere tekst.
  • Gebruik contrastcheckers om ervoor te zorgen dat je ontwerp voldoet aan de vereiste normen.
  • Vermijd het gebruik van kleuren die te dicht bij elkaar liggen, vooral als ze de leesbaarheid van de tekst beïnvloeden.

Tools en Hulpmiddelen ​

  • WebAIM Contrast Checker: Een handige tool die de contrastverhouding tussen tekst en achtergrond berekent. WebAIM Contrast Checker.
  • Colorable: Een tool die je helpt om kleuren te kiezen die voldoen aan de toegankelijkheidsvereisten. Colorable.
  • Accessible Colors: Een tool om de toegankelijkheid van je kleurenschema’s te testen. Accessible Colors.

Betekenis voor toegankelijkheid ​

Het waarborgen van een goede contrastverhouding tussen tekst en achtergrond is essentieel voor de leesbaarheid van je website, vooral voor mensen met visuele beperkingen. Dit maakt de inhoud toegankelijk voor een breed publiek, inclusief mensen met een vermoeid gezichtsvermogen, kleurblindheid en andere visuele beperkingen, en helpt om je website gebruiksvriendelijker te maken voor iedereen.

Referenties ​