Kleurenblindheid, slechtzienden en webdesign

1 op de 12 mannen (ja, het is vooral een mannenzaak) is kleurenblind. Stel dat je doelgroep uit 12 miljoen mannen bestaat, dan hebben we het over een miljoen kleurenblinden. Je webdesign aanpassen aan deze grote groep is dus geen overbodige luxe. Maar hoe doe je dit?

De meeste kleurenblinde mensen zien wel kleuren. Ze zien ze alleen net iets anders (of minder sterk) dan een niet-kleurenblinde. Daltonisme wordt ook wel deze vorm van kleurenblindheid genoemd. Het is genoemd naar John Dalton, de eerste persoon ooit die een wetenschappelijk artikel schreef over kleurenblindheid.

Er is ook de zeer zeldzame achromatopsie, waarbij een persoon helemaal geen kleuren ziet. Dit komt voor bij 1 op de 40.000 mensen. Ik zal dit verschijnsel echter buiten dit artikel laten, omdat het inzichten vereist die ik niet heb. Ik ben een Daltonist, geen Achromatopist.

Soorten kleurenblindheid

Binnen de meer voorkomende vorm van kleurenblindheid onderscheiden we drie typen:

Protanomalie (rode kleurenblindheid)

Volgens webAIM zijn de kegeltjes of kleurreceptoren in de ogen van mensen die aan protanomalie lijden, niet gevoelig voor lange golflengten (de rode kleuren). Voor deze mensen lijken rode tinten donkerder dan de werkelijke tinten en lijken ze meer beige. Groene tinten worden vaak verward met rode tinten. Ikzelf val in deze groep van kleurenblinde mensen.

Deuteranomalie (groene kleurenblindheid)

Volgens Colormax zijn de kegeltjes in de ogen van mensen met deuteranomalie ongevoelig voor groen en nemen de patiënten vooral blauwe en gele tinten waar. Hoewel de aandoening min of meer vergelijkbaar is met protanomalie, lijken rode kleuren bij deze aandoening niet zo donker.

Tritanomalie (blauwe kleurenblindheid)

Tritanomalie wordt gekenmerkt door de afwezigheid van blauwe kegeltjes in de ogen van patiënten. In het algemeen kunnen groen en blauw bij deze aandoening door elkaar lopen, en geel kan als een lichtere tint van rood verschijnen of helemaal niet zichtbaar zijn.

Monochromie (zeer zeldzaam) is wanneer een persoon geen kleuren kan zien

Hoe kleurenblinden uw website zien

Moeilijk leesbare tekstblokken, knoppen die niet opvallen, hyperlinks die een belasting zijn voor de ogen… dit zijn slechts enkele van de moeilijkheden die ik en duizenden andere kleurenblinde mensen ondervinden bij het surfen op het internet.

Duidelijke contrasten maken het leven van een kleurenblinde makkelijker. Het verschilt echter per kleurenblinde tussen welke kleuren extra contrast moet bestaan om iets zichtbaar te maken. Neem bijvoorbeeld de afbeelding hieronder.

Webontwerpen voor kleurenblindheid

Het ontwerpen van uw site voor kleurenblindheid vergt wat denkwerk en doelgerichtheid. Hier zijn een paar tips voor het ontwerpen van uw website met kleurenblindheid in het achterhoofd.

Vertrouw niet te veel op kleur

Het overkoepelende thema van ontwerpen voor kleurenblindheid is dat je niet te veel moet vertrouwen op pigmentatie. Je moet kleur niet gebruiken als het belangrijkste of enige element dat de aandacht van je gebruikers trekt. Natuurlijk, rood is de universele kleur voor fouten, maar als je een online formulier opstelt, moet je rood niet gebruiken als de enige indicator dat de gebruiker een fout heeft gemaakt bij het invullen. Combineer uw kleuren met andere elementen, zoals foutmeldingen, die mensen met een kleurentekort kunnen helpen om te weten waar ze moeten kijken en wat ze moeten doen. 

Gebruik symbolen

Een van de meer beproefde manieren om niet alleen op kleur te vertrouwen is het gebruik van symbolen wanneer dat gepast is. Om terug te komen op het voorbeeld van de vormfouten: uitroeptekens zijn een standaardsymbool voor fouten. U kunt rood combineren met een uitroepteken om een fout in het formulier aan te geven.

Gebruik texturen en patronen

Als je bepaalde objecten wilt benadrukken, is het een goed idee om texturen en/of patronen te gebruiken. Dit is vooral nuttig voor grafieken en diagrammen, waar kleur vaak wordt gebruikt om onderscheid te maken tussen items. Alleen kleur gebruiken kan echter het doel voorbijschieten voor mensen met kleurenblindheid. Het toevoegen van patronen en texturen zoals ruitjes, lijnen en stippen kan helpen om elk item uniek en gemakkelijk herkenbaar te maken. 

Gebruik labels

Het gebruik van labels op uw site kan de ervaring voor gebruikers die kleurenblind zijn aanzienlijk verbeteren. Texturen en patronen zijn een geweldig ontwerpelement voor grafieken en diagrammen, maar het toevoegen van labels kan de zaken nog verder verduidelijken. Etikettering is vooral nodig wanneer u items op uw website heeft die zich onderscheiden door kleur. Als u bijvoorbeeld items op uw site verkoopt die in verschillende kleuren verkrijgbaar zijn, moet u elk van die opties labelen om de gebruiker te laten weten wat hij koopt. 

Ga voor vet

Mensen met kleurenblindheid hebben de neiging om dikke en geprononceerde lijnen makkelijker te zien. Vermijd het gebruik van dunne reepjes kleur, en zorg er in plaats daarvan voor dat links vet en uitgesproken zijn. Dit zal helpen om elementen zoals call-to-action (CTA) knoppen te benadrukken. 

Contrast

U kunt ervoor zorgen dat de onderdelen van uw website opvallen bij alle gebruikers door op de juiste manier kleurcontrast te gebruiken in uw ontwerp. De truc is om helderheid en toon te gebruiken, naast tinten. Als u contrasteert op kleur, maar dezelfde helderheid handhaaft, kunnen elementen er gemengd of warrig uitzien voor mensen met kleurproblemen.

Het aanpassen van helderheid en toon is niet alleen een goede praktijk voor kleurenblindheidstoegankelijkheid, maar het is ook de beste praktijk voor algemeen ontwerp. U zult merken dat contrasteren met helderheid en toon, in plaats van alleen pigmentatie, ook esthetisch veel bevredigender is. 

Om een beter idee te krijgen van hoe u helderheid en tooncontrasten op uw site implementeert, kunt u deze in grijstinten bekijken.

Vermijd bepaalde kleurencombinaties

Omdat kleurenblindheid voor iedereen anders is, is het niet voldoende om bepaalde tinten te vermijden. Er zijn bepaalde kleurencombinaties die problemen kunnen veroorzaken voor gebruikers die kleurenblind zijn. Hier is een lijst van veel voorkomende combinaties die vermeden moeten worden:

• Groen/rood
• Groen/blauw
• Groen/zwart
• Groen/bruin
• Groen/grijs
• Lichtgroen/geel
• Blauw/paars
• Blauw/grijs

Omarm het minimalisme

Veel verschillende tinten op uw site kan leuk en aantrekkelijk lijken, maar het kan verwarrend en frustrerend zijn voor mensen die kleurenblind zijn. U kunt nog steeds plezier beleven door u aan een palet te houden en gebruik te maken van gradaties, helderheid en tint. Naast het verbeteren van de toegankelijkheid van uw site voor mensen met een kleurentekort, kan een minimalistisch ontwerp uw site er ook slanker en professioneler uit laten zien.

Tips voor webdesign en kleur voor kleurenblinden

Tips en handleidingen voor webdesign, ontwerp, kleurenpaletten en kleur voor kleurenblinden

Meer informatie over kleur en WCAG richtlijnen