8 minuten leestijd

6 tips om je website toegankelijk te maken voor kleurenblinden

Kleurenblindheid, of beter kleurstoornis, is een stoornis die vaker voorkomt dan we denken. Als designer sta je hier niet bij stil hoeveel personen met een kleurstoornis je website bezoeken of je ontwerp bekijken. We houden met andere woorden vaak geen rekening met toegankelijkheid voor kleurenblinden. In deze blog geven we 6 tips om rekening te houden met kleurenblindheid en hoe je dit best toepast in jouw volgende ontwerp.

Wout Hardy • 2 juli 2020

Share on facebook
Share on twitter
Share on linkedin

Wat is kleurenblindheid?

Kleurenblinden kunnen nog steeds kleuren zien maar alleen zien ze de kleuren in minder tinten.  De term “kleurenblindheid” is daarom niet helemaal correct. We kunnen beter de term kleurstoornis gebruiken. Een kleurstoornis kan worden veroorzaakt door meerdere verschillende dingen, maar meestal is de stoornis te wijten aan genetische factoren. Naast genetische factoren kan bijvoorbeeld veroudering ook een oorzaak zijn van kleurstoornis.

In termen van aantallen treft kleurenblindheid ongeveer 1 op 12 mannen en 1 op 200 vrouwen in de wereld. Dit betekent dat er wereldwijd ongeveer 300 miljoen mensen kleurenblind zijn. Deze doelgroep sluit je liever niet uit. 

Lichtreceptoren:

In ons netvlies beschikken we over 2 soorten lichtreceptorcellen: staafjes en kegeltjes.

Kegeltjes: In ons netvlies beschikken we over 7 miljoen kegeltjes. Kegeltjes zijn gevoelig voor kleuren zoals rood, groen en blauw. Deze 3 kleuren worden gemengd op het netvlies waardoor er veel kleurnuances ontstaan.

Staafjes: In ons netvlies beschikken we over 120 miljoen staafjes. Staafjes zijn gevoelig voor licht en laten ons toe om in het donker te zien.

Om kleuren van elkaar te onderscheiden is voldoende licht nodig. Als er niet genoeg licht is, nemen de staafjes het over van de kegels waar het zicht op de kleuren afneemt.

Verschillende soorten kleurenblindheid

Zwakte voor rood en groen

Deuteranopie (groen-blind). In dit geval ontbreken de gevoelige kegels (groen). Een persoon met deuteranopie kleurenblindheid kan slechts 2 tot 3 verschillende soorten tinten zien, een persoon met normaal zicht kan 7 verschillende tinten zien. (gevoelig voor groene kleuren)

Deuteranomalie: Deuteranomalie (groen-zwak). Bij dit type van kleurenblindheid ontbreekt het de persoon niet aan de groene kegels, maar ligt de gevoeligheidspiek dichter bij de rode kegels. (gevoelig voor groene kleuren)

deuta

Protanopie: Bij protanopie zijn er 2 opties. Ofwel heb je defecte kegels (L-kegels) ofwel ontbreken alle L-kegels. Personen die dit soort kleurenblindheid hebben worden ook wel dichromaten genoemd. Een persoon met normaal zicht heeft 3 soorten kegels. (gevoelig voor rode kleuren):

Protanomalie: Als de L-kegels defect zijn, komen ze in verschillende intensiteiten voor. Hieruit kan zowel een sterkere als een zwakkere kleurenblindheid voortkomen.  Als de L-kegels defect zijn, maar niet ontbreken, wordt dit protanomalie genoemd. Mensen die aan dit soort kleurenblindheid lijden worden abnormale trichromaten genoemd. (gevoelig voor rode kleuren):

prota

Zwakte voor blauw en geel

Tritanopie: Mensen die lijden aan tritanopie zijn dichromaten. Dit betekent dat de S-kegels volledig ontbreken.  (gevoelig voor blauw/gele kleuren):

Tritanomie: Dit is een verminderde vorm van blauwgele kleurenblindheid, waarbij de S-kegels wel aanwezig zijn, maar wel een soort mutatie hebben. (gevoelig voor blauw/gele kleuren):

trita

Monochromatopsie

Mensen met monochromatisch zicht kunnen geen kleur zien. Hun wereld bestaat uit verschillende grijstinten, variërend van zwart tot wit. Monochroom is uiterst zeldzaam en komt slechts bij ongeveer 1 op de 40.000 mensen voor en de symptomen ervan kunnen het leven erg moeilijk maken. Meestal heeft iemand met monochroom een donkere bril nodig in normale lichtomstandigheden.

mono

Inhoudstafel

Meest voorkomende soorten kleurenblindheid

1. Deuteranomolie: 6% van de mannen, 0,4% van de vrouwen
2. Deuteranopie: 1% van de mannen
3. Protanomalie: 1% van de mannen, 0,01% van de vrouwen
4. Protanopie: 1% van de mannen
5. Tritanopia: Minder dan 1% van de mannen en vrouwen
6. Tritanomalie: Even zeldzaam voor mannen en vrouwen 0,01% voor beide
7. Monochromatopsie : 1 op 40.000 personen

Waarom je best rekening houdt met mensen met een kleurstoornis

Als normaal ziende persoon is het moeilijk voor te stellen hoe je werk er voor een kleurenblind oog uit gaat zien.
En toch kan dit een enorme impact hebben. Websites zijn een grote zorg omdat het cruciaal is dat ze leesbaar en gemakkelijk te navigeren zijn voor alle gebruikers.

Kleurenblinden maken ook vaak gebruik van een speciale bril die gemaakt is voor personen met een kleurstoornis. Het is niet evident om deze bril in het dagelijkse leven te gebruiken. Daarom kan je maar beter een design of website maken die toegankelijk is voor mensen met een kleurenstoornis. 

Dit moet je weten

• Minstens 300 miljoen mensen wereldwijd zijn kleurenblind.
• Sterk kleurenblinde mensen kunnen alleen onderscheid maken tussen 20 verschillende tinten, wanneer de meeste mensen in staat zijn om onderscheid te maken tussen meer dan 100 tinten.
• Alle baby’s zijn kleurenblind als ze geboren worden. Baby’s beginnen binnen 7 dagen na de geboorte kleuren te zien en ontwikkelen het kleurenzicht volledig tegen de tijd dat ze zes maanden oud worden.

Waar jij als designer rekening mee kan houden voor kleurenblinden. 6 Tips!

1. Maak gebruik van icons in je ontwerp

Het is belangrijk dat een aanmeldingsformulier niet alleen kleuren maar ook pictogrammen gebruikt. Mensen met een rood/groene kleurstoornis kunnen geen onderscheiden maken of het juist of fout is.

login CBN

Door de toevoeging van de W-, L- en D-tekens kunnen gebruikers twee informatiepunten gebruiken om de pictogrammen te begrijpen. De personen met een kleurstoornis hoeven dus niet langer alleen maar kleur te gebruiken.

Icons CBN
2. Maak gebruik van meta-tags in webshops

Je kunt kleurenblinden ondersteunen door gebruik te maken van de meta-tag. Bij online winkelen wordt de kleur meestal in een vierkant aangegeven waardoor dit vaak moeilijk te zien is voor de persoon met een kleurstoornis. De oplossing is om een title-tag toe te voegen met de naam van de kleur “Zeegroen”.

cbn title tag
3. Gebruik contrasterende kleuren

Contrast is meestal geen probleem voor de meeste mensen die kleurenblind zijn. Maak uw kleuren donkerder en lichter om het contrast meer uitgesproken te maken. Ja kan ook spelen met verschillende tinten of met niveaus van helderheid en verzadiging.

Deze aanbevolen plugin houdt rekening met contrast in jouw ontwerp.

4. Gebruik variaties in routemappen

Een tram map met daarop de route die de trammen afleggen of een wegen map die je gebruikt op vakantie. Ook dit is voor een kleurenblinde een moeilijk opgave als er bepaalde kleuren worden gebruikt. Als designer kan je gebruik maken van dubbele lijnen, stippellijnen, lijnen met bollen in, enz.  

metro map
5. Kleurgebruik in datavisualisatie (grafieken, diagrammen, ...)

Als je een visualisatie maakt moet het eenvoudig zijn. Het is belangrijk om de juiste kleurencombinaties te gebruiken zodat je visualisaties toegankelijk is voor iedere persoon. Dit is belangrijk zodat de eindgebruiker weinig te interpreteren heeft. Als u dit kunt realiseren, zal het ook voor de eindgebruiker gemakkelijk te begrijpen zijn.

grafiek

Maak gebruik van textures in je visualisatie. Zo kan een kleurenblinde op een snelle manier je grafiek begrijpen.

grafiek CBN

6. Keep it simple!

Wanneer je ontwerpt voor toegankelijkheid is het belangrijk om je designs zo eenvoudig en gestroomlijnd mogelijk te houden. Een minimalistische aanpak zal ervoor zorgen dat uw ontwerpen/visualisaties gemakkelijker te begrijpen zijn, of uw publiek nu wel of niet kleurenblind is.

Aanbevolen plugin voor kleurenblindheid

Stark is een plugin die je kan gebruiken in Adobe XD, Sketch & Figma. Dankzij deze plug-in hou je rekening met toegankelijkheid. Je kan op een snelle manier zorgen dat je kleuren, visuals en typografie hand in hand gaan en een goede leesbaarheid en contrast bieden. 

Naast de contrast checker heb je de optie om je artboard te simuleren voor kleurenblinden. Je duid aan met welke soort kleurstoornis je jouw design wilt vergelijken. Hierna kan je jouw ontwerp zo nodig mogelijk aanpassen zodat het toegankelijk is voor de kleurenblinden.

Bekijk de website van Stark 

Doe de test voor kleurenblindheid

Benieuwd hoe jouw website er uit ziet door het oog van een kleurenblinde? Dit kan je simpel testen. Zijn alle zaken leesbaar? Is er gebruik gemaakt van iconen? Zit het contrast goed? 

Doe hier een test

Inhoudstafel

Klaar om jouw website toegankelijk te maken voor kleurenblinden? Start een gesprek!

Bekijk onze recent gelanceerde projecten