Kleurcontrast is het verschil in helderheid tussen twee kleuren. Dit is cruciaal voor de leesbaarheid van je website. Denk bijvoorbeeld aan de kleur van de tekst en de achtergrond. Een goed contrast zorgt ervoor dat iedereen, ook mensen met een visuele beperking, je tekst goed kunnen lezen. Mensen die kleurenblind zijn, zien kleuren anders. De rood-groen combinatie is vaak het moeilijkste te onderscheiden. Rood, groen, bruin en oranje lijken allemaal erg op elkaar.

Laatst liep ik een oud-collega tegen het lijf. Erg gezellig was dat. We raakten niet uitgesproken. We zijn samen even een koffietentje ingedoken. En ja, het thema digitale toegankelijkheid kwam natuurlijk ook ter sprake. Ze vertelde dat haar vader kleurenblind was: “Ik weet nog goed dat ik aan hem vroeg of hij in mijn poëziealbum wilde schrijven. Hij reageerde enthousiast. Tekenen was ook wel aan hem besteed, dus ik mocht zelf kiezen welk plaatje hij zou tekenen in mijn boekje. Ik koos voor een lichtbruin katje. Na een paar weken was het af, kwam hij terug en liet mij de tekening met versje vol trots zien. Ik snapte er niks van. Ik had toch een bruin katje gekozen? Waarom was deze in vredesnaam roze? Katten zijn toch helemaal niet roze?” Vertelde ze met een lach op haar gezicht.

Nu kijkt ze vertederend naar de tekening en begrijpt ze precies wat er aan de hand was.

Zonder voldoende kleurcontrast verlies je je boodschap

Stel je eens voor dat bezoekers je website zien zoals de vader van mijn oud-collega deed met dat katje. Simpelweg omdat de tekstkleur te veel lijkt op de achtergrondkleur. Dit ontmoedigt en zorgt ervoor dat ze afhaken. Vooral voor mensen met kleurenblindheid of verminderd zicht is dit een groot probleem. Maar wat dacht je van fel zonlicht of bij een gedimd scherm? Dan wordt jouw website niet gezien. Een goed kleurcontrast is echt essentieel om de inhoud aan iedereen over te brengen.

Let op kleurencombinaties voor mensen met kleurenblindheid

Hieronder zie je een overzicht van verschillende vormen van kleurenblindheid.

Naast kleurcontrast is het belangrijk om rekening te houden met kleurenblindheid. De meest voorkomende vorm is rood-groen kleurenblindheid, waarbij mensen moeite hebben om rood, groen en bruin van elkaar te onderscheiden. Ook blauw-geel kleurenblindheid komt voor, waarbij blauw en groen, of geel en roze lastig te onderscheiden zijn.

Daarom is het slim om combinaties als rood en groen, of blauw en geel, te vermijden voor belangrijke elementen zoals knoppen, tekst of waarschuwingen.

Kleuren alleen zijn niet genoeg om belangrijke informatie te delen

Gebruik je de kleur rood bij foutmeldingen in een formulier? Dan missen mensen met kleurenblindheid dit. Dus naast kleur, gebruik je ook tekst en symbolen. Dan begrijpt echt iedereen wat je bedoelt.
Gelukkig zijn er tools die je kleurcontrast meten:

• TPGi’s Colour Contrast Analyser: Handig voor Windows en Mac.
• WebAIM Contrast Checker: Voer je kleuren in en zie direct of het contrast voldoet aan de normen.
• Chrome Developer Tools: Zit al in de Chrome-browser en helpt je om direct op je website het contrast te meten.

Hoe je de uitkomsten van deze tools leest

Een contrastverhouding van minimaal 4,5:1 is nodig voor normale tekst, terwijl grotere tekst een iets lagere verhouding mag hebben (3:1). De aanbevolen verhouding voor het contrast van achtergrond ten opzichte van de voorgrond is 4,5:1 voor normale tekst of 3:1 voor grote tekst. Er zijn hulpmiddelen die je kunt gebruiken om deze te controleren, zoals de Wave WebAIM contrast checker.

Een extra hoog kleurcontrast van 7,0:1 (succescriterium 1.4.6) kan in sommige gevallen erg helpen. Teksten zijn dan nog beter leesbaar en dat is natuurlijk mooi meegenomen. Ook voor elementen zonder tekst heb je goed kleurcontrast nodig. Denk aan belangrijke afbeeldingen, icoontjes en velden in formulieren. Daarvoor is een minimaal kleurcontrast van 3,0:1 vereist. Ook hier geldt: hoe hoger het kleurcontrast, hoe beter zichtbaar.

Bij video’s op social media is het heel goed om ondertiteling in te zetten. Dit is ook weer toegankelijker voor slechthorende of dove mensen. Maar ook hier geldt, zorg dat het leesbaar is. Bij filmpjes is het soms best lastig om het juiste kleurcontrast te vinden. Vooral als je te maken hebt met verschillende achtergronden. Toch loont het om je hier bewust van te zijn, want het is o zo belangrijk.

Tip
Richtlijnen volgens WCAG:

• Voor kleine tekst (minder dan 18pt of 24px) is een kleurcontrast van minimaal 4,5:1 nodig.
• Voor grote tekst (vanaf 18pt of 24px, of vanaf 14pt vetgedrukt) is een kleurcontrast van minimaal 3,0:1 voldoende.
• Deze regels gelden voor alle teksten, dus ook voor tekst in afbeeldingen en video’s.

Hoog contrast is beter

Sommige kleurenpaletten veroorzaken problemen voor gebruikers met een slecht gezichtsvermogen, kleurenblindheid en soortgelijke aandoeningen. Hoe hoger het contrast is, hoe beter. Máár te veel contrast veroorzaakt weer problemen voor mensen met gevoelige ogen. Dit geldt niet alleen voor tekst en achtergrond, maar ook voor elementen als knoppen, iconen en menu’s.

Is het contrast van je website of content niet goed? Geen paniek! Je kunt dit vaak heel makkelijk zelf oplossen:

• Kies nieuwe kleuren die beter bij elkaar passen en toch voldoende contrast hebben.
• Pas de achtergrondkleur aan of maak de tekst vetter of groter.
• Gebruik hulpmiddelen naast de kleuren om belangrijke informatie extra te benadrukken. Dit kunnen tekstlabels zijn of iconen.

Dan heb je nog de belangrijke WCAG 2.2 versus WCAG 3

Huh, wat zeg je Nicoline? Nou, op dit moment is WCAG 2.2 de standaard richtlijn (en daar werk ik ook mee), maar er komt een verandering aan met WCAG 3. Deze nieuwe richtlijn maakt gebruik van een geavanceerde methode: APCA (Advanced Perceptual Contrast Algorithm). Deze houdt rekening met de grootte en dikte van de tekst en de afstand tussen letters. Zo kan er nauwkeuriger bepaald worden of het contrast goed is.

Een goed kleurcontrast is niet alleen belangrijk voor de leesbaarheid, maar ook voor de toegankelijkheid van je website. Het zorgt ervoor dat iedereen, ongeacht hun visuele beperkingen, je website goed kan gebruiken. Door een paar eenvoudige stappen te volgen, controleer je zelf en pas je aan. Zo voldoet alles aan de richtlijnen. Dat is een opluchting toch?

Maar toegankelijke kleuren zijn toch niet cool?

Het is een misvatting dat toegankelijke websites en huisstijlen saai zijn. Het is echt een kwestie van experimenteren met de juiste kleurencombinaties.

Het is best veel informatie. En soms misschien ook wel wat abracadabra. Dat snap ik best. Dus kom je er alsnog niet uit na het lezen van dit blog? Schakel dan hulp in. Ik help je om je website én al je content toegankelijk te maken.

En lees ook zeker mijn andere blogs over digitale toegankelijkheid:

• Maak je documenten nu simpel en snel toegankelijk
• Maak je website toegankelijk met alt-teksten