Kleurenblindheid op het web: wat het betekent en hoe je er rekening mee kunt houden bij het ontwerpen.

Wat is kleurenblindheid?

We zien kleuren dankzij drie soorten kegeltjes in het netvlies. Elk type reageert op een ander lichtspectrum: rood, groen of blauw. Als een bepaald type kegeltje minder goed of helemaal niet werkt, nemen mensen bepaalde kleuren anders waar.

Strikt genomen zijn er twee vormen:

• Kleurenblindheid: Mensen kunnen alle kleuren zien, maar sommige kleuren nemen ze minder goed waar. Rood en groen lijken bijvoorbeeld erg op elkaar.

• Kleurenblindheid: Sommige mensen kunnen één of meerdere kleuren helemaal niet waarnemen. Bij volledige kleurenblindheid, ook wel achromatopsie genoemd, zien mensen alleen grijstinten.

In het dagelijks taalgebruik wordt de term 'kleurenblindheid' vaak voor beide gebruikt. De meeste mensen die hiermee te maken hebben, lijden aan een kleurzichtstoornis, niet aan volledige kleurenblindheid.

De meest voorkomende typen

• Rood-groentekort: Dit is verreweg de meest voorkomende vorm. Rood en groen zijn moeilijk van elkaar te onderscheiden. Afhankelijk van welke kegel is aangetast, wordt het protanomalie of protanopie (rood) en deuteranomalie of deuteranopie (groen) genoemd.

• Blauw-geeldeficiëntie (tritanomalie of tritanopie): Zeldzaam. Blauw en groen, en geel en roze zijn moeilijk van elkaar te onderscheiden.

• Volledige kleurenblindheid (achromatopsie): Zeer zeldzaam. Mensen die hieraan lijden, zien alleen licht en donker en zijn vaak erg gevoelig voor verblinding.

_{Figuur 1: Simulatie van verschillende vormen van kleurenblindheid. Origineel (linksboven), roodblindheid (rechtsboven), groenblindheid (linksonder) en blauwblindheid (rechtsonder).}

Hoeveel mensen worden getroffen?

Volgens het portaal van het Duitse federale ministerie van Volksgezondheid gesund.bund.de Ongeveer 8% van de mannen en 0,4% van de vrouwen heeft een kleurenblindheid. In een team van 25 mannen zijn er statistisch gezien twee getroffen. Volledige kleurenblindheid daarentegen is zeer zeldzaam: in Duitsland leven er slechts ongeveer 2700 mensen mee.

Mannen worden veel vaker getroffen omdat de genen voor rode en groene kegeltjes zich op het X-chromosoom bevinden. Mannen hebben maar één X-chromosoom, dus een verandering in dit gen heeft een direct effect. Vrouwen hebben er twee en zijn meestal draagsters zonder symptomen.

Kleurenzien kan ook in de loop van het leven veranderen, bijvoorbeeld door oogziekten. Daarnaast zien veel mensen kleuren minder scherp in bepaalde situaties, zoals op een telefoon in fel zonlicht.

Welke elementen op websites veroorzaken problemen?

Kleurenblindheid vormt een belemmering wanneer kleur de enige manier is om informatie over te brengen. Typische voorbeelden:

• Links in de doorlopende tekst: Als links alleen met kleur zijn gemarkeerd, zonder onderstreping, kunnen veel mensen ze niet zien.

• Fout- en succesmeldingen: Een rood kader rond een formulierveld of een groen vinkje alleen is niet voldoende.

• Kaarten en plattegronden: Lijnen, balken of vlakken die alleen in kleur verschillen, kunnen niet van elkaar worden onderscheiden.

• Statusweergaven: Rode, oranje en groene indicatoren, bijvoorbeeld voor beschikbaarheid of leveringsstatus, worden onduidelijk.

• Knoppen en selecties: Als de actieve status alleen wordt aangegeven door een kleurverandering, weten gebruikers niet wat er is geselecteerd.

• Laag contrast: Lichtgrijze tekst op een witte achtergrond of tekst over afbeeldingen is moeilijk te lezen – niet alleen voor mensen met een kleurenblindheid.

• Plaatsaanduidingen in formulieren: Lichtgrijze placeholdertekst is vaak moeilijk te onderscheiden van tekst die al is ingevoerd.

Het probleem is wijdverspreid. Volgens de WebAIM Miljoen 2026 83,9% van de startpagina's van de miljoen meest bezochte websites had tekst met te weinig contrast.

Figuur 2 laat zien hoe een grafiek eruit kan zien voor iemand met groenblindheid:

^{Figuur 2: Links het ongewijzigde diagram, rechts met gesimuleerde groene blindheid.}

Wat de WCAG vereist

De Web Content Accessibility Guidelines (WCAG) bevatten drie succescriteria die met name belangrijk zijn voor kleur:

• 1.4.1 Gebruik van kleur (niveau A): Kleur mag niet het enige visuele middel zijn. Het overbrengen van informatie, het aangeven van een actie of het onderscheiden van een element.

• 1.4.3 Contrast (minimum) (niveau AA): Tekst heeft een contrastverhouding van minimaal 4,5:1 ten opzichte van de achtergrond nodig; grote tekst heeft een contrastverhouding van minimaal 3:1 nodig.

• 1.4.11 Contrast buiten de tekst (niveau AA): Knoppen, formulierveldranden, focusindicatoren en belangrijke afbeeldingen hebben een contrastverhouding van minimaal 3:1 nodig.

Deze criteria maken deel uit van de Europese norm EN 301 549, waarop de Europese Toegankelijkheidswet is gebaseerd op.

Tips voor kleurtoegankelijk webdesign

1. Gebruik kleur nooit op zichzelf: Combineer kleur met tekst, pictogrammen, patronen of onderstreping. Een foutmelding heeft duidelijke tekst nodig, niet alleen een rode rand.

2. Onderstreep links: Links in de doorlopende tekst moeten worden onderstreept of op een andere zichtbare manier worden gemarkeerd.

3. Controleer het contrast: Gebruik een contrastchecker om te controleren of tekst en belangrijke elementen voldoen aan de WCAG-waarden.

4. Label de grafieken direct: Schrijf labels naast lijnen en balken in plaats van alleen een kleurenschaal te gebruiken. Patronen of verschillende lijnstijlen kunnen ook helpen.

5. Vermijd kritische kleurencombinaties: Rood en groen, groen en bruin, en blauw en paars zijn voor veel mensen moeilijk van elkaar te onderscheiden.

6. Testen met een simulatie: Veel ontwerptools en ontwikkelaarstools voor browsers kunnen verschillende kleurenblindheid simuleren. Dit laat snel zien waar informatie verloren gaat.

7. Denk verder dan kleurenblindheid: Goed contrast en duidelijke signalen zijn ook nuttig voor ouderen, mensen met een visuele beperking en iedereen die buitenshuis een telefoon gebruikt.

Onze gids voor Toegankelijk ontwerp met WCAG en ons artikel over toegankelijke online formulieren Bevat meer praktische tips.

Hoe Eye-Able helpt

Toegankelijk ontwerp vormt de basis. Daarnaast, Eye-Able Assist Hiermee kunnen bezoekers een website aanpassen aan hun eigen behoeften. Een speciale modus past de kleuren aan voor mensen met kleurenblindheid of een kleurzichtstoornis, en de contrastmodus maakt tekst beter leesbaar.

^{Afbeelding 3: Illustratie van kleurcorrectie met behulp van Ishihara-testafbeeldingen (Bron: Wellcome-collectie CC BY 4.0)}

Figuur 3 laat zien hoe de kleurmodus verschillen in Ishihara-testafbeeldingen weer zichtbaar kan maken. Het verhogen van het contrast of de kleurverzadiging kan ook helpen. Het verkeerslicht in figuur 4 is een ander voorbeeld:

^{Figuur 4: Verkeerslicht met normale kleuren (links), verkeerslicht voor mensen met roodblindheid (midden), verkeerslicht voor mensen met roodblindheid na de Eye-Able-correctie (rechts)}

Assist is echter geen vervanging voor toegankelijk ontwerp. Of een website voldoet aan de contrastvereisten van WCAG hangt af van het ontwerp en de implementatie ervan. Met Eye-Able Audit & Rapportage Je kunt je website controleren op contrastfouten en andere obstakels en deze bij de bron verhelpen.

Conclusie

Ongeveer één op de twaalf mannen heeft een kleurenblindheid. Voor hen gaat informatie die alleen via kleur wordt overgebracht verloren. De oplossing is simpel: gebruik nooit alleen kleur, zorg voor voldoende contrast en test je ontwerp met een simulatie. Dit maakt websites gebruiksvriendelijker voor iedereen.

Benieuwd hoe toegankelijk uw eigen website is? Onze gratis toegankelijkheidscontrole Geeft je binnen 2 minuten een eerste overzicht.

Veelgestelde vragen: kleurenblindheid op het internet

Hoe vaak komt kleurenblindheid voor?

Ongeveer 8% van de mannen en 0,4% van de vrouwen heeft een kleurenblindheid. De meest voorkomende vorm is rood-groenblindheid. Volledige kleurenblindheid, waarbij mensen alleen grijstinten zien, is zeer zeldzaam.

Wat is het verschil tussen kleurenblindheid en een tekort aan kleurenzicht?

Mensen met een kleurenblindheid zien alle kleuren, maar sommige kleuren minder goed. Mensen met kleurenblindheid kunnen één of meerdere kleuren helemaal niet waarnemen. In het dagelijks taalgebruik wordt de term 'kleurenblindheid' vaak gebruikt voor beide aandoeningen.

Welke kleuren moet ik vermijden als ik kleurenblind ben?

Vermijd combinaties van rood en groen, groen en bruin, en blauw en paars wanneer deze een verschil moeten aangeven. Het allerbelangrijkste: gebruik kleur nooit als enig signaal – voeg altijd tekst, pictogrammen of patronen toe.

Wat zeggen de WCAG over kleur?

Succescriterium 1.4.1 van WCAG stelt dat kleur niet het enige middel mag zijn om informatie over te brengen. Daarnaast moet tekst een contrastverhouding van ten minste 4,5:1 hebben (1.4.3), en knoppen, formuliervelden en belangrijke afbeeldingen een contrastverhouding van ten minste 3:1 (1.4.11).

Hoe kan ik mijn website testen op kleurenblindheid?

Gebruik de simulatie voor kleurenblindheid in je ontwerptool of de ontwikkelaarstools van je browser om te zien hoe mensen met verschillende vormen van kleurenblindheid je website zien. Een contrastcontrole of een geautomatiseerde toegankelijkheidscontrole geeft eventuele contrastfouten aan.