Bijna 1 op de 12 surfers heeft last van een vorm van kleurenblindheid (8% mannen en 0,5% van de vrouwelijke bevolking). Op de gehele westerse wereld ligt de schatting op meer dan 32 miljoen mensen. Wees hiervoor dus niet blind bij het ontwerp van je site! Als deze bezoekers niet kunnen navigeren doorheen je website omdat bv. bepaalde knoppen of teksten met een laag contrast of moeilijke kleurencombinatie aan hun oog voorbij gaan, mis je op termijn toch heel wat potentiële klanten!

Maar wat is kleurenblindheid nu precies?

Het normale oog kan drie grondkleuren onderscheiden: rood, groen en blauw. Iemand met een gestoord kleurenzicht is minder gevoelig (anomale trichromatopsie) of helemaal ongevoelig (dichromatopsie) voor één grondkleur.

Bij anomale trichromatopsie heb je drie soorten van kleurenblindheid:

• Protanomalie: mindere gevoeligheid voor rode tinten (1% van de mannen)
• Deuteranomalie: mindere gevoeligheidvoor groene tinten (5% van de mannen).
• Tritanomalie: mindere gevoeligheidvoor blauwe tinten (zeldzaam)

Bij dichromatopsie maakt men een onderscheid tussen:

• Protanopie: totale ongevoeligheid voor rood (1%)
• Deuteranopie: totale ongevoeligheid voor groen (1%)
• Tritanopie: totale ongevoeligheid voor blauw (zeldzaam)

Bij monochromatopsie (zeldzaam) kan de persoon in kwestie slechts één kleur zien.

Bovenstaande kleurstoornissen zijn zeker niet alle vormen van kleurenblindheid, maar geven je toch al een duidelijker beeld.

Ptttefuuh...Moeilijke woorden allemaal toch he...nu waarschijnlijk je tong in de knoop ligt of je je buurman helemaal ondergezeverd hebt, is het tijd om je een handig lijstje te geven van bruikbare tips om bezoekers met kleurenblindheid ook wegwijs te maken op je site!

Waar kan je op letten bij het ontwerp van je site?

Gebruik duidelijke kleurcontrasten in tekst en call-to-actions. Het is dus beter om tegengestelde kleuren te gebruiken dan meerdere varianten van één kleur. Ik denk hierbij dan vooral aan navigatie-elementen zoals (sub)menu's, breadcrumps en knoppen.

Vermijd rood op zwart en mix geen rode, groene en oranje tinten door elkaar. Deze kleuren kunnen voor een kleurenblinde samen "blenden" waardoor de boodschap voor een kleurenblinde verloren gaat. En zoals je in onderstaande afbeelding ziet zou het mixen van deze kleuren maar tot een "kotserig" kleurtje leiden...

Gebruik heldere kleuren. Vb. een donkerbruin vlak naast een donkergroen vlak, is voor een persoon met kleurenblindheid moeilijk te onderscheiden. Je kan dit oplossen door voor het donkergroene vlak een heldere groene tint te kiezen.

Combineer kleuren met symbolen of tooltips om zaken duidelijk te maken. Zo kan een waarde die daalt, voorgesteld worden door de kleur rood in combinatie met een neergaand pijltje. Of wil je groen gebruiken om "goed" aan te duiden, combineer dit dan met bijvoorbeeld een vinkje. Zet bovendien steeds tooltips op afbeeldingen, etc.

Onderlijning van hyperlinks zorgt ervoor dat iemand met een kleurstoornis de tekst ook herkent als hyperlink. Zorg ervoor dat een kleurenblinde ook weet wanneer hij over de link beweegt met de muis. Gebruik bv. een andere soort onderlijning, schaduw of andere visuele aspecten.

Tracht bij grafieken, niet enkel kleuren te gebruiken maar eveneens patronen of symbolen. Heb je bijvoorbeeld een rode en een groene balk naast elkaar staan, arceer dan één van de twee balken. Toont de grafiek een combinatie van gekleurde lijnen, kan je deze opmaken d.m.v. een klein symbooltje (vb. driehoekje, vierkantje, etc) doorheen de lijn.

Heb je een formulier met verplichte velden? Geef dit dan niet enkel aan door kleur (bv. rood) maar zet naast deze velden ook een symbooltje (bv. asterix) om aan te geven dat de gebruiker verplicht een waarde dient in te geven.

Tot slot

Denk je dat je website duidelijk genoeg is voor kleurenblinden? Test je afbeeldingen dan eens in Adobe Photoshop, door ze een beperkte kleurverzadiging toe te wijzen. Dit zal de kleur uit je afbeelding "trekken" waardoor je kan zien of het contrast nog steeds duidelijk is. Of zet je monitor om naar grijswaarden. Groen en rood met een zelfde intensiteit zullen er praktisch even "grijs" uitzien, terwijl limoengroen en een bloedrode tint duidelijk verschillend blijven.

Je kan ook steeds een kleurencheck laten door van je website door middel van een simulator. Geef je eerder de voorkeur aan een locale tool. Installeer dan Color Oracle.

Wees je bewust als designer dat je nog steeds een rijkelijk kleurenpallet mag gebruiken om je website te ontwerpen. De site hoeft er echt niet saaier uit te zien voor iemand met een normaal kleurenspectrum. Het belangrijkste element is dat iedereen wegwijs raakt op je site!

Onderstaand webpagina gedeelte is door het oog bekeken van iemand met een normaal kleurenspectrum (linkerafbeelding) en iemand met protanopie (rechterafbeelding). Het olijfgroen oogt minder mooi, maar de boodschap blijft nog steeds duidelijk.

Ben je zelf kleurenblind? Wat is jouw ervaring op het net? Laat het ons weten!