Als je webcontent maakt, dan is het belangrijk om deze content toegankelijk te maken voor een breed publiek. Zo zijn er richtlijnen voor toegankelijkheid van webcontent, oftewel de WCAG. Deze richtlijnen helpen websites toegankelijk te maken voor mensen met beperkingen, zoals slechtzienden of mensen met kleurenblindheid.
Een van de belangrijkste aspecten van de WCAG-richtlijnen is het waarborgen van voldoende kleurcontrast tussen de tekst en de achtergrond. Dit zorgt ervoor dat alle gebruikers, ongeacht hun visuele capaciteiten, de inhoud goed kunnen lezen en begrijpen. Maar hoe weet je zeker of het kleurcontrast op jouw website voldoet aan de WCAG-eisen?
Wat is kleurcontrast en waarom is het belangrijk?
Kleurcontrast verwijst naar het verschil in helderheid tussen de tekstkleur en de achtergrondkleur. Een goed kleurcontrast is cruciaal voor leesbaarheid. Terwijl een zwarte tekst op een witte achtergrond vanzelfsprekend goed leesbaar is, kan een lichte tekst op een lichte achtergrond – zoals een witte tekst op een pastelkleurige achtergrond of een felle oranje knop met witte tekst – een stuk lastiger te lezen zijn. Dit kan ervoor zorgen dat bepaalde bezoekers moeite hebben met het navigeren of begrijpen van je website.
Voor mensen met een visuele beperking of kleurenblindheid kan onvoldoende contrast ervoor zorgen dat ze belangrijke informatie missen, zoals knoppen, links of instructies. Dit heeft een directe impact op de toegankelijkheid van je website.
De WCAG-richtlijnen voor kleurcontrast
De WCAG 2.1 richtlijnen bieden specifieke eisen waaraan het kleurcontrast van webpagina’s moet voldoen. Deze eisen hangen af van de grootte en het gebruik van de tekst. Zo gelden de volgende regels:
• Voor teksten kleiner dan 18pt (24px) moet het kleurcontrast minimaal 4,5:1 zijn.
• Voor grotere teksten vanaf 18pt (24px), of voor teksten van minimaal 14pt (18,7px) die vetgedrukt zijn, geldt een minimum contrast van 3,0:1.
Deze regels gelden voor alle soorten informatieve teksten op je website, inclusief tekst in afbeeldingen, buttons en video’s.
Hoe controleer ik het kleurcontrast?
Gelukkig zijn er online diverse tools beschikbaar waarmee je het kleurcontrast van je website eenvoudig kunt controleren. Met deze tools kun je twee kleuren invoeren (bijvoorbeeld de tekstkleur en de achtergrondkleur), waarna de tool automatisch berekent of het contrast voldoet aan de WCAG-richtlijnen.
Mijn favoriete tool is deze contrastchecker van WebAIM. Heb je twee kleuren ingevoerd en blijkt dat het contrast niet groot genoeg is? Dan kun je de slider gebruiken om één van de twee kleuren aan te passen, waardoor het contrast toeneemt.
Ook de contrastchecker van Accessible Web werkt prettig en laat direct zien of je voor de test bent geslaagd. Je ziet hieronder een voorbeeld van het grootste contrast. Dat is namelijk 21:1 (zwart en wit).
Bij deze tools kun je snel zien of de kleuren op je website voldoen aan de richtlijnen, en zo niet, wat je kunt aanpassen om het contrast te verbeteren.
Tip: wil je snel de kleurcode achterhalen van een knop of element op je website? Gebruik deze Chrome-extensie om makkelijk de kleur te vinden.
