Voor het verbeteren van de toegankelijkheid van websites, is het belangrijk om te zorgen voor voldoende contrastverschil tussen de gebruikte kleuren als achtergrond en de teksten die erop staan. Doe je dit niet, krijg je de melding “De contrastverhouding van achtergrond- en voorgrondkleuren is niet voldoende” of in het Engels “Background and foreground colors do not have a sufficient contrast ratio.”
Waarom zijn contrasten belangrijk? #
8% van de mannen en 0,5% van de vrouwen in Nederland zijn kleurenblind aldus het oogfonds. Deze mensen zijn niet of in mindere maten in stand om kleuren te herkennen en te discrimineren. De problematiek verloopt van anomale trichromatopsie tot aan totale achromatopsie, waarbij mensen echt alleen nog grijstinten zien. Wanneer deze doelgroep niet in staat is om tekst en achtergrond van elkaar te scheiden, komt de boodschap van jouw website dus niet duidelijk over. Daarnaast is bekend dat goede contrasten ook een zeer positieve impact hebben bij andere vormen van slechtziendheid. Tijdens een onderzoek in 2020 becijferde het oogfonds dat Nederland 250.000 slechtzienden telt. 85% daarvan is ouder dan 50, dus veelal een vermogende consument en een belangrijke beslissingsmaker. Hoewel het aantal vrouwen met kleurenblindheid minder is dan mannen, zijn er in totaal twee keer zoveel slechtziende vrouwen dan mannen.
De rol van WCAG 2 #
Binnen de WCAG (Web Content Accessibility Guidelines) is op basis van onderzoek vastgesteld dat er bepaalde minimale contrasten moeten zijn die ook nog verschillen op basis van tekstgrote. Zo moet het contrast voor kleine letters (tot 18pt/24px of 14pt/19px vet) een groter contrast worden gebruikt dan voor grotere letters. Daarnaast is het zo dat de WCAG 2.1 AA standaard minder contrast vraagt dan de WCAG 2.1 AAA standaard. Google lijkt AA aan te houden als minimum. Voor websites in de publieke sector in Nederland is WCAG AAA echter een verplichting. Het kan dus goed zijn dat voldoen aan de WCAG impact heeft op jouw huisstijl.
Zo krijg je jouw contrasten goed #
De gemakkelijkste weg is om de contrastcalculator van dequeuniversity.com te gebruiken. Daarmee hebben we ook de huisstijl van WebsiteNazorg.nl aangepast om beter te voldoen aan de WCAG richtlijnen.
De originele kleur blauw van WebsiteNazorg.nl was #3277F6 en werd gebruikt voor knoppen en in-tekst links. Dit leverde het volgende resultaat op:
Je ziet dat we op een lichtintensiteit van 58% zitten met deze kleur blauw. Door deze te verlagen naar 55% werd het beeld al veel beter, terwijl het kleurverschil nog erg klein bleef:
Wilden we ook voor kleine teksten het niveau van WCAG AAA behalen, dan wordt de kleur blauw veel minder ‘mooi’ op nog maar 42% lichtintensiteit. Daar we ons best doen een website helpdesk voor iedereen te zijn, hebben we inmiddels overal op onze huisstijl deze donkerdere kleur blauw toegepast.
We kunnen ons voorstellen dat het klinkt als een enorme klus om in jouw website de kleurstelling aan te passen op alle beeldelementen. Weet dat onze ontwikkelaars dat via slimme opdrachten op de database doen. Dit schilt vele uren werk. We helpen je graag.
