Het belang van toegankelijk kleurgebruik

Iemand die niet alle kleuren kan herkennen of waarnemen ziet de wereld om zich heen heel anders dan iemand die wel kleuren kan zien en onderscheiden. Die persoon heeft dus een totaal andere kleurenperceptie van de wereld, wat verschillende uitdagingen met zich mee kan brengen. Het op de juiste manier gebruiken van kleur binnen onze digitaliserende samenleving is vooral voor mensen met een dergelijke beperking dus heel belangrijk. Het niet zien of herkennen van kleuren kan namelijk grote gevolgen hebben bij het gebruik van digitale tools en content. Denk hierbij aan de interpretatie van grafieken of visuele informatie, maar vooral ook het begrijpen van (kleur)waarschuwingen. 

Als je nagaat dat één op de twaalf mannen (8%) en één op de 250 vrouwen (0,4%) te maken heeft met enige mate van kleurenblindheid, dan heeft dus ongeveer 8 à 9 procent van alle gebruikers, bij een foutief gebruik van kleuren, moeite met het zien of begrijpen van jouw (digitale) content.

Gebruik van kleur en contrast

Kleur en kleurgebruik spelen een essentiële rol bij de leesbaarheid en het gebruiksgemak van (digitale) content. Er moet dan ook altijd voldoende contrast tussen het object of de tekst en de achtergrond zitten, én het is belangrijk dat kleur niet als het enige visuele middel wordt gebruikt om informatie over te brengen, een actie aan te geven, een reactie op te roepen of een visueel element te onderscheiden. Naast het gebruik van kleur moeten er ook (duidelijke) instructies in tekst of audio gegeven worden. Dus alleen een ‘groene’ of ‘rode’ knop volstaat niet; de waarde of de functie van de knop moet er ook duidelijk opstaan.

Voor afbeeldingen geldt hetzelfde; ze mogen niet alleen afhankelijk zijn van kleur. In de inleiding van dit artikel stipten we het interpreteren van grafieken en diagrammen al even aan. Wanneer de segmenten daarin alleen worden onderscheiden door kleur, wordt het voor iemand met een visuele beperking lastig om ze te herkennen en/of te onderscheiden. Door ook duidelijke labels, waardes en patronen toe te voegen aan de segmenten wordt het geheel duidelijker leesbaar.

[tekst loopt door onder de afbeelding]

Figuur: grafiek waarbij de lijnen onderling te weinig contrast hebben.

Gebruik dus contrasterende kleurencombinaties en - naast kleuren - andere manieren om visueel informatie over te dragen, zoals het gebruik van labels en patronen. Dit geldt niet alleen voor het ontwerp, maar ook voor losse/kleine onderdelen die informatie overbrengen of een actie aangeven of vragen, zoals formulieren, teksten, knoppen en informatieve afbeeldingen, maar ook actieve menu-items of checkboxes.

Eisen vanuit WCAG

De WCAG (Web Content Accessibility Guidelines) bieden hieromtrent enkele richtlijnen om digitale content toegankelijk te maken voor mensen met verschillende vormen van (visuele) beperkingen. Dit zijn de meest belangrijke met betrekking tot kleurgebruik:

• Contrasterende tekst - Richtlijn 1.4.3: Contrast (minimum). Deze richtlijn stelt dat er voldoende contrast moet zijn tussen tekst en achtergrond, zodat de tekst ook duidelijk leesbaar is voor mensen met een visuele beperking. Minimum vereisten: Tekst kleiner dan 18pt (24px) moet een contrastverhouding van minimaal 4.5:1 hebben ten opzichte van de achtergrond voor gewone tekst. Voor tekst vanaf 18pt (24px) of 14pt (18,7px) vetgedrukt is het minimum contrast 3:1. Deze eisen gelden voor alle informatieve teksten, dus ook voor teksten in afbeeldingen en video’s.
   
• Geen afhankelijkheid van kleur alleen - Richtlijn 1.4.1: Gebruik van kleur. Kleur mag niet de enige manier zijn waarop informatie wordt overgebracht. Als een formulier bijvoorbeeld velden markeert die niet goed zijn ingevuld, mag dit niet alleen met kleur gebeuren, maar moet ook een tekstuele aanwijzing (zoals een foutmelding) of een symbool (zoals een ster) worden toegevoegd.
   
• Ondersteuning voor gebruikers met kleurenblindheid - Richtlijn 1.4.6: Contrast (tussen tekst en achtergrond bij actieve elementen). Bij het maken en ontwerpen van digitale pagina's moet je rekening houden met gebruikers die kleurenblind zijn, zoals kleurenblindheid voor rood-groen. Dit betekent dat informatie niet alleen afhankelijk mag zijn van een specifieke kleur. Het gebruik van kleur in combinatie met andere visuele elementen zoals patronen of tekst is belangrijk.
   
• Tekst niet afhankelijk van enkel kleur - Richtlijn 1.4.7: Visuele presentatie. Bij het gebruik van kleur om elementen te onderscheiden, moet ervoor gezorgd worden dat er alternatieven zijn voor mensen die kleuren niet kunnen onderscheiden. Dit geldt bijvoorbeeld voor het gebruik van kleurtinten om knoppen te markeren of voor tekst in tabellen. Het gebruik van kleur samen met labels of patronen is daarbij belangrijk.

Toegankelijk kleurgebruik

Om digitale content toegankelijk te maken met betrekking tot kleurgebruik is het belangrijk om kleurencombinaties te vermijden die moeilijk te onderscheiden zijn voor mensen met de meest voorkomende vormen van kleurenblindheid, zoals rood-groen kleurenblindheid. Voeg labels, patronen of iconen toe bij gekleurde elementen om informatie voor iedereen toegankelijk, maar vooral ook begrijpelijk te maken, ongeacht visuele beperkingen of mogelijkheden.

Toetsen

Er zijn meerdere mogelijkheden om te toetsen of jouw digitale content voldoet aan de WCAG-richtlijnen. Je kunt handmatig controleren, door visueel door content heen te gaan. Let hierbij op onderdelen in een afwijkende kleur zoals tekst in een andere kleur, knoppen, formulieren, menu's, informatieve afbeeldingen en alle onderdelen waar interactie mee mogelijk is.

Let er ook op dat een wijziging van een ‘status’ niet alleen met kleur wordt aangeduid, zoals bij actieve checkboxes en een actief menu-item. Je kunt ook gebruik maken van (online) tools die helpen bij het controleren van de toegankelijkheid van je kleurgebruik. Deze tools kunnen beoordelen of jouw (digitale) content voldoet aan de WCAG-richtlijnen voor kleurcontrast.

NB: bekijk ook eens de snelstartgids Check dit! Deze gids bevat eenvoudige spelregels om de toegankelijkheid van publicaties te controleren en is gratis aan te vragen of te downloaden.

Bronnen: Dedicon, WCAG, Inclusief Publiceren