Gepubliceerd door de redactie van ColorVision. Deze educatieve inhoud is geen persoonlijk medisch advies. Lees ons redactiebeleid en de testmethodiek.
Kort antwoord
Toegankelijk ontwerp gebruikt kleur nooit als enige drager van betekenis. Voeg altijd tekst, een pictogram, een patroon of positie toe naast de kleur, en zorg dat het helderheidscontrast voldoet aan de WCAG-drempels.
Ontwerpen voor kleurenblindheid
Circa 1 op de 12 mannen en 1 op de 200 vrouwen heeft een vorm van kleurzienstoornis. Draagt uw interface betekenis over met kleur alleen, dan missen die gebruikers die informatie. Het goede nieuws: de oplossing is meestal eenvoudiger dan u denkt.
De belangrijkste regel
Gebruik kleur nooit als enige manier om informatie over te brengen.
Dit is WCAG-succescriterium 1.4.1 (Use of Color) en het fundament onder al het overige. Draagt u betekenis over met kleur, voeg dan altijd een tweede kanaal toe:
- Tekst — labels, statusmeldingen
- Pictogrammen — vinkje, uitroepteken, kruisje
- Patronen — streepjes, arceringen, stippen
- Positie — een vaste, voorspelbare volgorde
- Vorm — omlijning, dikte, rondingen
Helderheidscontrast
Een kleurzienstoornis raakt het onderscheiden van tint, niet van helderheid. Voldoende helderheidscontrast is daarom uw krachtigste instrument.
De minima van WCAG 2.2:
- Gewone tekst: verhouding 4,5:1
- Grote tekst (18 pt of 14 pt vet): 3:1
- Interface-elementen en grafische onderdelen: 3:1
- Niveau AAA voor gewone tekst: 7:1
Halen twee kleuren de contrastdrempel, dan blijven ze doorgaans ook onderscheidbaar voor wie de tinten niet kan scheiden. Onze contrastchecker berekent die verhoudingen direct.
Problematische kleurcombinaties
Vermijd deze paren als enige onderscheidende factor:
| Vermijd | Reden |
|---|---|
| Rood / groen | verward bij protan- en deutanvormen (circa 8% van de mannen) |
| Groen / bruin | verward bij rood-groenstoornissen |
| Blauw / paars | beide ogen blauw bij protanopie |
| Groen / blauw | verward bij tritanvormen |
| Lichtgeel / wit | laag helderheidscontrast voor iedereen |
| Groen / grijs | verward bij deuteranopie |
Doorgaans veiliger zijn blauw / oranje en blauw / geel, die bij vrijwel alle rood-groenvormen onderscheidbaar blijven.
Veilige paletten voor data
Gebruik voor grafieken en diagrammen paletten die daar speciaal voor zijn ontworpen:
- Het Okabe-Ito-palet — acht kleuren die bij alle gangbare kleurzienstoornissen onderscheidbaar blijven
- ColorBrewer — paletten met een filter “colorblind safe” voor sequentiële, categorische en divergerende data
- Viridis / Cividis — continue paletten met een gelijkmatig oplopende helderheid, ook leesbaar in grijswaarden
Cividis is specifiek geoptimaliseerd voor mensen met een kleurzienstoornis en een goede keuze wanneer toegankelijkheid een harde eis is.
Veelvoorkomende patronen en hun oplossing
Foutmeldingen in formulieren
❌ Het invoerveld rood omranden ✅ Rode rand + waarschuwingspictogram + tekstuele foutmelding onder het veld
Statusindicatoren
❌ Groen bolletje betekent online, rood bolletje offline ✅ Gekleurd bolletje met tekstlabel, of verschillende vormen (gevuld / open)
Lijngrafieken
❌ Vijf lijnen die alleen op kleur verschillen ✅ Verschillende lijnstijlen (doorgetrokken, gestreept, gestippeld) + labels aan het uiteinde van de lijn in plaats van een aparte legenda
Links in lopende tekst
❌ Blauwe links zonder onderstreping ✅ Links in lopende tekst onderstrepen (dáárom blijft onderstreping belangrijk)
Kaarten en heatmaps
❌ Een verloop van rood naar groen ✅ Een verloop dat ook in helderheid verandert (bijvoorbeeld donkerblauw naar lichtgeel) + numerieke labels
Uw ontwerp testen
- Simuleren — bekijk schermafbeeldingen met onze kleurenblindheidssimulator als protanopie, deuteranopie en tritanopie
- Grijstinttest — zet het ontwerp om naar zwart-wit. Werkt het dan nog, dan is uw helderheidscontrast in orde
- Contrastverhoudingen nakijken — gebruik de contrastchecker voor elk tekst-achtergrondpaar
- Testen met echte gebruikers — geen simulatie vervangt gebruikers die de aandoening werkelijk hebben
Beknopte checklist
- Geen enkele informatie wordt uitsluitend met kleur overgebracht
- Alle tekst haalt 4,5:1 (3:1 voor grote tekst)
- Interface-elementen en grafische grenzen halen 3:1
- Links in lopende tekst zijn onderstreept of anderszins niet-kleurgebonden gemarkeerd
- Grafieken gebruiken patronen of labels naast kleur
- Fout- en succesmeldingen bevatten tekst en een pictogram
- Het ontwerp blijft leesbaar in grijstinten
- Gecontroleerd met minstens drie simulatievormen
Onderbouwing en bronnen
Deze bronnen geven achtergrond bij kleurzienstoornissen en het klassieke klinische onderzoek. De browseractiviteiten van ColorVision zijn educatieve screenings, geen klinische instrumenten.
Controleer nu je kleurwaarneming
Probeer onze gratis kleurwaarnemingstests in de browser. Geen account nodig.