De toegankelijkheid van je website testen: kleur en contrast

4 januari 2023
Leon Op de Beek
3 minuten

Al sinds 23 september 2020 moeten de websites van instanties binnen de overheid en semi-overheid voldoen aan de richtlijnen van de WCAG 2.1. Nieuwe websites moeten al sinds september 2019 aan deze regels voldoen. En ook commerciële websites krijgen de komende jaren te maken met scherpere wetgeving rondom toegankelijkheid. Het is best een klus om goed te begrijpen hoe je al deze richtlijnen moet interpreteren én om er vervolgens ook iets mee te doen. Daarom gaan we de komende tijd wat handige tips met je delen waarmee je de toegankelijkheid van je website kunt testen. Die vormen namelijk een fijn begin.

Hoe toegankelijk is je website?

Het is handig om eerst zelf te testen hoe de toegankelijkheid van je website ervoor staat. Je leert er veel van en het helpt je ook om gerichter maatregelen te nemen. In deze reeks blogartikelen gaan we vijf eenvoudige tests met je delen. De volgende onderwerpen komen aan bod:

We trappen de reeks dus af met het onderwerp ‘kleur en contrast’.

Kleurcontrast voor slechtzienden en kleurenblinden

Websites worden beter leesbaar als er voldoende contrast is tussen de tekstkleur en de achtergrondkleur. Dat is uiteraard belangrijk voor slechtzienden, maar ook voor bijvoorbeeld kleurenblinden. In Nederland is 8% van de mannen kleurenblind en 2% van de vrouwen. Dat is een grote groep. Daarnaast help je er mensen met gezonde ogen mee, die hun scherm op energiebesparing gezet hebben of juist in omstandigheden werken met veel tegenlicht of lichtinval. Het contrastverschil is trouwens niet alleen belangrijk voor tekst. Ook met kleuren in tabellen of grafieken dien je rekening te houden.

Minimale contrasteisen voor maximale toegankelijkheid

In de WCAG staat omschreven wat de minimale eisen voor contrastverhoudingen zijn. Een goede contrastverhouding begint bij 4,5:1 voor gewone tekst. Hierbij is 1,0:1 contrastloos en 21,0:1 het maximaal mogelijke contrast. Grote tekst (vanaf 18pt) en vette tekst (vanaf 14pt) zijn beter leesbaar en hoeven dus ook minder contrastrijk te zijn. De minimale contrastverhouding voor grote en vette tekst is 3,0:1. Minimale contrastverhoudingen gelden, als eerder gezegd, ook voor elementen in de website zonder tekst, zoals tabellen en grafieken. Hiervoor geldt een minimaal contrastverschil van 3,0:1. Maar er zijn een aantal uitzonderingen. Zo hoef je bijvoorbeeld niet je logo aan te passen om te voldoen aan de toegankelijkheidsvoorwaarden. Een goed contrast is dus belangrijk, maar overdrijf niet. Een extreem hoge contrastverhouding van 21,0:1 (tussen puur zwart en wit bijvoorbeeld) leest voor veel mensen ook niet prettig. Zeggen deze getallen je weinig? Er zijn gelukkig handige tools waarmee je jouw kleurcontrast kunt testen.

Contrast accessibility tools

Er zijn een aantal websites en contrast accessibility tools beschikbaar waarmee je de contrastverhouding tussen voor- en achtergrondkleur kunt bepalen:

Contrast-ratio.com: website waarop je eenvoudig de voor- en achtergrondkleur kunt invullen om het kleurcontrast te berekenen.

Contrast Checker: website van Acard Communication, een Canadees reclamebureau, waarop je kleuren kunt invullen en het contrast berekenen.

Chrome development tools: Chrome heeft de tool Color Picker ontwikkeld, waarmee je kleurcontrast kunt bepalen en verbeteren.

Firefox development tools: De development toolkit van Firefox bevat het onderdeel Firebug. Hierin kan je je kleuren bepalen en vergelijken met de minimale contrasteisen van WCAG.

Luminosity Colour Contrast Ratio Analyser: deze gratis tool vertelt je de contrastwaarde van twee geselecteerde kleuren. Ook zie je direct of de combinatie voldoet aan de eisen van WCAG 2.1. De Luminosity Colour Contrast Ratio Analyzer is ontwikkeld door Juicy Studio in Engeland.

Meer weten over het toegankelijker maken van je website? In deel 2 van deze blogserie gaan we in op het vergroten van het lettertype van je website.