Hoe zien kleurenblinden een website?
Een aanzienlijk deel van de Nederlandse bevolking is in meer- of mindere mate kleurenblind. Zij hebben moeite met het onderscheiden van kleuren op een website. Daardoor kunnen ze de website veel moeilijker bedienen. Ook doen ze er langer over om de gewenste informatie te vinden. Soms kunnen ze informatie zelfs helemaal niet vinden. Hou jij op jouw website rekening met kleurenblinden?
De feiten
Ongeveer 4 procent van de Nederlandse bevolking heeft een vorm van kleurenblindheid. Dat zijn een kleine 700.000 mensen. Mannen zijn veel vaker kleurenblind dan vrouwen.
- 1 op de 12 mannen heeft een vorm van kleurenblindheid (8% van alle mannen).
- 1 op de 200 vrouwen heeft een vorm van kleurenblindheid (0,5% van alle vrouwen)
De meest voorkomende vormen van kleurenblindheid
Er zijn verschillende soorten kleurenblindheid, de drie bekendste vormen zijn Deuteranopia, Protanopia en Tritanopia. Op het onderstaande plaatje kan je het verschil zien.
Waarom zou je rekening houden met kleurenblindheid?
Kleurenblinden hebben moeite om onderscheid te maken tussen bepaalde kleurentinten. Aangezien websites gebruik maken van kleuren om informatie begrijpelijk te maken en navigatie te ondersteunen, is het van belang om al in de ontwerpfase rekening te houden met deze visuele aandoening. Een gebruiksvriendelijke website houdt rekening alle bezoekers van een website, dus ook met ouderen, gehandicapten en kleurenblinden. Zoals aangegeven is ongeveer 4% van alle Nederlanders kleurenblind. Het is daarom verstandig om rekening te houden met kleurenblindheid in webdesign.
Tips om jouw website kleurenproof te maken
Met de onderstaande tips maak je jouw website snel kleurenblind-proof:
– Vermijd bepaalde kleurencombinaties
Een aantal kleurcombinaties zijn voor kleurenblinden moeilijk of niet te onderscheiden. Vermijd daarom de volgende kleurcombinaties:
- rood en groen
- groen en bruin
- blauw en paars
- groen en blauw
- lichtgroen en geel
- blauw en grijs
- groen en grijs
- groen en zwart
- rood op zwart
- zwart op rood
– Zorg voor voldoende contrast tussen de kleuren
Mensen die kleurenblind zijn kunnen verschillende kleuren alleen onderscheiden als ze voldoende contrast hebben. Als je zelf wilt kijken of de kleurvlakken op jouw website voldoende contrast hebben, maak je website dan eens zwart-wit. Als je geen kleuren ziet die in elkaar overlopen dan jouw website geschikt voor kleurenblinden.
Gebruik ook geen pastelkleuren, deze hebben te weinig contrast en zijn niet of zeer slecht zichtbaar. Kleuren die overvloeien zijn ook not-done.
– Gebruik symbolen en tekens naast kleur
Kleuren die in helderheid amper van elkaar te onderscheiden zijn, kun je toch herkenbaar maken door ze een verschillende layout te geven. Denk hierbij bijvoorbeeld aan het toevoegen van geometrische figuren, strepen of stippen. Deze methode kan je goed toepassen op tabellen, grafieken en infographics. Gebruik ook tekst in de vlakken. Zo is het nog duidelijker voor een kleurenblinde waar het om gaat.
– Geef extra aandacht aan linkjes
Het onderscheiden van gewone tekst en linkjes is voor een kleurenblinde extra moeilijk. Laat daarom duidelijk zien dat het om een linkje gaat. Geef het linkje een andere kleur of maak hem vet. Zorg er in ieder geval voor dat de link onderstreept is. Zo is de link voldoende onderscheidend.
Niet de meest ideale oplossing, maar alle kleine beetjes helpen. Geef de link een title tag mee. Als de kleurenblinde bezoeker over de link heen gaat met de cursor ziet hij een tekst te voorschijn komen. Zo heeft hij weer een extra houvast en weet hij waar de link naar toe gaat als hij er op klikt.
– Gebruik tekst voor meldingen in formulieren
Bij een formulier op een website heb je verplichte velden. Als er op de button geklikt wordt en er een verplicht veld vergeten is, dan kleurt dat veld meestal rood. Dit is voor een kleurenblinde niet of nauwelijks waar te nemen. Gebruik daarom naast de kleur ook een tekstuele melding. Hetzelfde geldt voor overige foutmelding, zoals bijvoorbeeld het verkeerd invullen van een e-mailveld. Als extra ondersteuning kunnen er ook icoontjes gebruikt worden die aangeven of iets correct of niet correct is ingevuld.
– Tekst vergroten
Soms zie je bovenin een website drie A-tjes staan. Een kleine, een grotere en nog een grotere. Hiermee kan je de tekst van een website groter maken. Dit is eigenlijk bedoeld voor slechtzienden, maar het kan ook voor een kleurenblinde net het verschil zijn tussen het wel en niet kunnen zien.
Je ziet het zelden, maar je zou ook knoppen/ linkjes kunnen toevoegen waarmee je de kleurstelling van de website aanpast, speciaal voor kleurenblinden. Ideaal voor kleurenblinden als jouw huisstijl net veel rood, groen of blauwtinten gebruikt.
Testen in fotoprogramma’s of jouw website makkelijk bekeken kan worden door kleurenblinden
Een goed fotoprogramma heeft ook de mogelijkheid om jouw plaatje om te zetten naar één van de soorten kleurenblindheid. Zo kan je zien of er gedeeltes van het plaatje van jouw website wegvallen en niet meer zichtbaar zijn. Ook kan je met een fotoprogramma het plaatje makkelijk in grijstone weergeven, zodat je ook kan zien welke elementen te weinig contrast hebben.
Online testen of jouw website kleurenblind-vriendelijk is
Er zijn een aantal websites, waarmee je online kan testen of jouw website geschikt is voor kleurenblinden. Met de uitslagen van deze testen kan je jouw website meteen verbeteren.
Op “Color Contrast Check” kan je een achtergrondkleur en een voorgrondkleur voor tekst vaststellen. Het programma berekent vervolgens de contrastratio en vertelt je of de ingevoerde kleurencombinatie in strijd is met de webrichtlijnen.
De online tool “WAVE.” is ook een aanrader. Vul de URL van jouw website in en WAVE geeft informatie terug over het aantal contrastfouten en andere mogelijke problemen waar mensen met kleurenblindeid tegen aan kunnen lopen, zoals het ontbreken van alt-teksten.
Op de website van thuiswinkel.org (https://zelfscantoegankelijkheid.thuiswinkel.org/) kan je een zelfscan test doen voor jouw website. Je krijgt dan informatie over de toegankelijkheid van jouw website. Er worden een aantal factoren gecheckt, waaronder het kleurcontrast.
Ben jij zelf kleurenblind?
Een korte test. Kijk eens naar het onderstaande plaatje. Kun je alle woorden lezen?
Het bovenste woord bij ieder kleurblokje kan je waarschijnlijk zonder moeite lezen. De onderste woorden zijn al wat moeilijker te onderscheiden. Kan je één of meerdere woorden niet lezen? Dan behoor jij waarschijnlijk ook tot de 4% van de Nederlanders die kleurenblind is.