Is jouw website toegankelijk voor mensen die kleurenblind zijn?

9 februari 2020 | Leestijd 4 minuten

Toegankelijkheid is één van de belangrijkste, maar ook één van de meest vergeten punten bij het ontwerpen van een website of app. Het is belangrijk omdat je een groot deel van de mensen onnodig de “toegang” ontzegt wanneer je hier geen rekening mee houdt. De toegankelijkheid van websites beïnvloed je onder andere met het gebruik van de juiste html tags, de grote van letters en kleurencombinaties. In deze blog ga ik in op het gebruik van kleuren. Iets wat niet alleen speelt bij websites, maar ook bij apps en print.

Wat kleuren doen met toegankelijkheid

Dat de grote van letters de leesbaarheid beïnvloeden, begrijpen de meeste mensen wel omdat kleine letters minder goed zichtbaar zijn, maar kleurencombinaties doen dat net zo goed of misschien nog wel meer. In Nederland heeft ongeveer 8% (700.000) van alle mannen en 0,5% van alle vrouwen een vorm van kleurenblindheid. Dit betekent dat zij in meer of mindere mate moeite hebben in het onderscheiden van kleuren.

Wanneer je kleurenblind bent, is het in de meeste gevallen niet zo dat je helemaal geen kleuren meer ziet. Je ziet alleen niet alle kleuren even goed en dat zorgt voor problemen. Die problemen ontstaan op het moment dat bijvoorbeeld het contrast tussen elementen onvoldoende is. Denk hierbij aan het lezen van een tekst in een lichte tint op een witte achtergrond. De tekst gaat dan min of meer op in de achtergrond. Visueel is kan dat mooi zijn, voor iemand met kleurenblindheid werkt het alleen frustrerend. Zij of hij heeft dan moeite met het lezen van de tekst of kan de tekst helemaal niet lezen.

De grote van de letters beïnvloed de eis voor het contrast. Zijn letters groter of dikker dan volstaat een lagere contrastwaarde, omdat die van nature makkelijker leesbaar Zie hiervoor ook de uitleg van Mozilla.

De volgende afbeeldingen illustreren het verschil in toegankelijkheid. Op de eerste afbeelding is de tekst zwart (kleurcode #000000) en 21.00 AAA. Het verschil in kleur tussen achtergrond en tekst is groot waardoor teksten goed leesbaar zijn.

Voorbeeld tekst met een goed contrast en de Firefox inspector.

Op de tweede afbeelding heeft de tekst een grijstint (kleurcode #888888) is het contrast 3.54. Dit is voor veel mensen te laag om de tekst goed en comfortabel te lezen. De titel heeft dezelfde kleur, maar doordat de letters groter en dikker zijn volstaat het contrast hier wel.

Voorbeeld tekst met te laag contrast en de Firefox inspector.

In de praktijk zie je veel apps en websites waarbij geen rekening wordt gehouden met visuele toegankelijkheid. In bovenstaand voorbeeld is het probleem vrij duidelijk. Ga je met verschillende kleuren werken dan wordt het vaak lastiger voor iemand te beoordelen, omdat je het zelf niet ziet als je geen visuele beperking hebt. En daar gaat het regelmatig fout, want vaak wordt er gestuurd op het “mooie” plaatje door mensen die niet kleurenblind zijn. Net als dat een gezond persoon bij het inrichten van een woning minder snel rekening zal houden met de toegankelijkheid voor een persoon in een rolstoel.

Hoe je eenvoudig de toegankelijkheid beoordeelt

Gelukkig kun je als opdrachtgever eenvoudig toetsen of de toegankelijkheid qua kleuren voldoende is. Vooraf doe je dat door als eis te stellen dat voor zaken als teksten en navigatie het contrast minimaal XXX moet zijn. Bij het testen biedt de browser Firefox een ingebouwde oplossing voor het controleren van de toegankelijkheid. Deze wordt ook getoond in de voorbeelden en je hoeft dus geen expert te zijn om dit te beoordelen.

Kleurencombinaties test je eenvoudig op de site van https://color.a11y.com/ContrastPair/. Daar is ook onderstaande test gedaan met de kleuren uit bovenstaand voorbeeld met het lagere contrast.

Test van kleurencombinatie gericht op toegankelijkheidbij A11Y

Ben je bezig met het ontwikkelen van een nieuwe website of app, vraag dan eens naar dit onderwerp. Of stel eisen ten aanzien van toegankelijkheid in het algemeen, want dat gaat verder dan alleen kleuren.

Wil je meer weten dan zijn de artikelen van Sara Soueidan over dit onderwerp een aanrader, maar je mag mij ook een e-mail sturen.