Kleurenblindheid en webdesign: wat je moet weten

Vaker voorkomend dan de meeste ontwerpers beseffen

Kleurzienstoornis — meestal kleurenblindheid genoemd — treft ongeveer 8% van de mannen en 0,5% van de vrouwen. Dat is ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen, waardoor het vaker voorkomt dan de meeste andere beperkingen waar toegankelijkheidsstandaarden voor het web zich op richten.

Toch wordt het bij het ontwerpen routinematig over het hoofd gezien. Teams testen met schermlezers en toetsenbordnavigatie, voeren een geautomatiseerde WCAG-scan uit en beschouwen het toegankelijkheidswerk als gedaan — zonder ooit te controleren of hun kleurenpalet leesbaar is voor kleurenblinde gebruikers.

Kleurenblindheid begrijpen, en wat het daadwerkelijk doet met de webinterfaces die je ontwerpt, is de eerste stap om het op te lossen.

De typen en wat ze doen

Kleurzienstoornis komt in verschillende vormen voor, en ze veroorzaken niet allemaal dezelfde ervaring.

Rood-groenstoornissen (meest voorkomend)

Protanopia — volledige afwezigheid van rode kegelfotoreceptoren. Rood lijkt donker of zwart. Rood-groenonderscheid gaat verloren.

Protanomalie — verminderde gevoeligheid voor rood. Rood, oranje en geel verschuiven richting groen, en de algehele ervaring is doffer, alsof het rode kanaal is teruggedraaid.

Deuteranopia — volledige afwezigheid van groene kegelreceptoren. De meest voorkomende vorm van kleurenblindheid. Groen en rood worden verward; de wereld lijkt gefilterd door een geelbruine lens.

Deuteranomalie — verminderde gevoeligheid voor groen. Vergelijkbaar met deuteranopia maar milder. Het meest voorkomende type in totaal, dat ongeveer 5% van de mannen treft.

Blauw-geelstoornissen (zeldzamer)

Tritanopia — afwezigheid van blauwe kegelreceptoren. Blauw lijkt groen, en geel lijkt bleek of onzichtbaar. Zeldzaam.

Tritanomalie — verminderde gevoeligheid voor blauw. Blauw-groen en rood-paars worden verward.

Monochromasie (zeer zeldzaam)

Achromatopsia — afwezigheid van alle kleurkegelreceptoren. Alleen helderheid wordt waargenomen; de wereld verschijnt in grijstinten. Vaak gepaard met lichtgevoeligheid en verminderde gezichtsscherpte.

Hoe kleurenblindheid veelvoorkomende webpatronen breekt

De typen in abstracte zin kennen is minder nuttig dan weten welke specifieke ontwerpkeuzes problemen veroorzaken. Dit zijn de meest voorkomende.

Foutmeldingen die alleen met rood worden aangegeven

De rand van een formulierveld rood maken om een validatiefout te tonen, is een van de meest wijdverbreide patronen in webdesign. Voor gebruikers met een rood-groenstoornis kan rood op wit of rood op grijs vrijwel onzichtbaar zijn, of niet te onderscheiden van een normale, niet-gefocuste toestand.

Dit wordt rechtstreeks behandeld door WCAG 2.2 1.4.1 Gebruik van kleur (niveau A): kleur mag niet het enige middel zijn om informatie over te brengen, een actie aan te geven, een reactie op te roepen of een visueel element te onderscheiden.

De oplossing is eenvoudig: combineer kleur met een tweede visuele indicator — een pictogram, een tekstlabel, een verandering in randdikte, of een ander signaal dat niet op kleur berust.

<!-- Alleen op kleur vertrouwen: voldoet niet aan 1.4.1 -->
<input type="email" class="field--error">

<!-- Kleur plus pictogram plus tekst: voldoet -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Voer een geldig e-mailadres in.
  </p>
</div>

Onvoldoende contrast

Laag contrast is een apart probleem van kleurenblindheid, maar ze overlappen. Veel kleurenpaletten die leesbaar lijken voor mensen met een typisch kleurzicht, worden nog moeilijker leesbaar bij een kleurzienstoornis, omdat het waargenomen verschil tussen voor- en achtergrond verder afneemt.

WCAG 1.4.3 vereist een minimale contrastverhouding van 4.5:1 voor normale tekst en 3:1 voor grote tekst. Contrast testen met een tool zoals de kleurkiezer in de DevTools van de browser of een speciale checker is niet onderhandelbaar — vertrouw niet op visuele inspectie.

Datavisualisatie die alleen in kleur codeert

Een cirkeldiagram met zes segmenten die alleen door kleur worden onderscheiden. Een kaart met een rood-naar-groenverloop. Een lijndiagram waarbij vier datasets alleen door tint worden onderscheiden.

Voor gebruikers met deuteranopia worden rood en groen niet te onderscheiden. De betekenis van het diagram stort volledig in. Zie voor meer hierover onze gids over toegankelijke datavisualisatie.

Links die alleen op kleur vertrouwen om op te vallen tussen lopende tekst

Standaard onderstrepen browsers links. Veel ontwerpers verwijderen deze onderstreping en vertrouwen alleen op kleur om links van omringende tekst te onderscheiden. Gebruikers met een kleurzienstoornis — en vooral degenen die contrastarme thema’s gebruiken — kunnen links helemaal niet herkennen.

WCAG 1.4.1 is hier ook van toepassing. Als de linkkleur de enige visuele indicator is (geen onderstreping, geen vetgedrukt, geen andere onderscheider), is de link niet toegankelijk voor kleurenblinde gebruikers.

De eenvoudigste oplossing: herstel de onderstreping. Of zorg er anders voor dat de linkkleur voldoende contrast heeft ten opzichte van zowel de kleur van de lopende tekst als de achtergrond.

Ontwerpen met kleurenblindheid in gedachten

Gebruik redundante codering

Voeg een tweede visueel kanaal toe naast kleur. In diagrammen: voeg patronen, texturen of datalabels toe. In statusindicatoren: voeg pictogrammen toe. In formuliertoestanden: voeg tekst toe. Het doel is dat iemand die de kleur volledig uit het ontwerp verwijdert, nog steeds alles kan begrijpen.

Test met simulatietools

Chrome DevTools heeft een ingebouwde simulatie van kleurenblindheid. Open DevTools > paneel Rendering > “Emulate vision deficiencies”. Je kunt protanopia, deuteranopia, tritanopia en achromatopsia simuleren.

Figma en andere ontwerptools hebben vergelijkbare plug-ins. Een simulatie uitvoeren duurt enkele seconden en onthult vaak problemen die niet zichtbaar waren in de standaardvoorvertoning.

Controleer je palet als geheel

Test niet alleen afzonderlijke elementparen. Bekijk het volledige palet samen: primaire, secundaire, fout-, succes-, waarschuwings- en informatiekleuren. Zien fout-rood en succes-groen er onder een deuteranopia-simulatie vergelijkbaar uit? Zo ja, dan heb je een probleem, ongeacht of je contrastverhoudingen technisch gezien slagen.

Vermijd problematische combinaties

Bijzonder onbetrouwbaar bij een kleurzienstoornis:

• Rood en groen
• Groen en bruin
• Blauw en paars
• Groen en grijs
• Groen en zwart

Wanneer deze paren in dezelfde context moeten verschijnen, onderscheid ze dan door helderheid of patroon in plaats van door tint.

Wat WCAG wel en niet dekt

WCAG dekt kleurcontrast (1.4.3, 1.4.11) en het verbod op het gebruik van kleur als enige middel om informatie over te brengen (1.4.1). Het schrijft niet voor welke kleuren je wel of niet mag gebruiken, en vereist niet dat je hele palet waarneembaar is onder elk type kleurzienstoornis.

Wat het vereist, is dat er geen betekenis verloren gaat wanneer kleur wordt verwijderd. Dat is de praktische test. Verwijder de kleur uit je ontwerp. Blijft elk stukje informatie toegankelijk via andere middelen?

Als het antwoord ja is, heb je aan de vereiste voldaan. Als foutmeldingen verdwijnen, als diagramgegevens dubbelzinnig worden, als links onzichtbaar worden — dan heb je werk te doen.

Onze toegankelijkheidsaudits omvatten kleurentoegankelijkheid als vast onderdeel van de beoordeling. Als je wilt weten waar je huidige ontwerp staat, voer dan een gratis geautomatiseerde scan uit om de automatiseerbare problemen als uitgangspunt op te sporen.