# Kleurenblind vriendelijke paletten en hoe je ontwerpen test

[Canonical HTML page](https://gradiently.design/nl/guide/color-blindness-design)

Bij de meeste kleurenblindheid zie je niet grijs. Bepaalde kleurparen vloeien gewoon samen tot één kleur. Kies kleuren die in helderheid verschillen en je ontwerpt eromheen.

## The short version

- Een kleurenblind vriendelijk palet gebruikt kleuren die duidelijk verschillen in helderheid, niet alleen in tint, zodat ze onderscheidbaar blijven als sommige tinten op elkaar lijken.
- Rood-groenverwarring is veruit de meest voorkomende vorm van kleurenblindheid; blauw-geelverwarring is veel zeldzamer en helemaal geen kleur zien nog zeldzamer.
- Het Okabe-Ito-palet van acht kleuren is ontworpen om onderscheidbaar te blijven bij de gangbare vormen van kleurenblindheid en is vrij te gebruiken.
- Laat kleur nooit alleen de betekenis dragen: voeg ook een label, icoon, patroon of positie toe.
- De devtools van Chrome en Edge simuleren meerdere vormen van kleurenblindheid op elke pagina, en een grijswaardencheck vangt de meeste problemen in seconden.

Een **kleurenblind vriendelijk palet** is een set kleuren die onderscheidbaar blijft voor mensen die bepaalde tinten verwarren, meestal rood en groen. De truc is kleuren te scheiden op helderheid én tint, en kleur nooit het enige signaal te laten zijn. Een donkerblauw en een lichtoranje blijven voor bijna iedereen verschillend. Een middenrood en een middengroen met dezelfde helderheid kunnen op hetzelfde modderbruin lijken. Hieronder vind je paletten om te kopiëren, de paren die je beter vermijdt en drie gratis manieren om je werk te testen.

## Soorten kleurenblindheid in het kort

Kleurenzien berust op drie soorten kegeltjes in het oog, grofweg afgestemd op lange, middellange en korte golflengten. Als één soort ontbreekt of verschoven is, gaan sommige kleuren die voor de meeste mensen verschillen op elkaar lijken. Het [artikel van WebAIM over kleurenblindheid](https://webaim.org/articles/visual/colorblind) behandelt de biologie. Voor ontwerp is deze tabel wat telt.

| Type | Aangetaste kegeltjes | Verwarde kleuren | Hoe vaak |
| --- | --- | --- | --- |
| Deuteranomalie en deuteranopie | Groen (middellang) | Rood met groen, groen met bruin, blauw met paars | Het vaakst |
| Protanomalie en protanopie | Rood (lang) | Rood met groen en zwart, rood lijkt donkerder | Vaak |
| Tritanomalie en tritanopie | Blauw (kort) | Blauw met groen, geel met roze of grijs | Zeldzaam |
| Achromatopsie | Alle | Alles wordt in grijstinten gezien | Zeer zeldzaam |

De rood-groenvormen erven over via het X-chromosoom, daarom komen ze veel vaker voor bij mannen dan bij vrouwen.

De rode draad: tint wordt onbetrouwbaar, maar **helderheid blijft behouden**. Iemand met deuteranopie ziet nog steeds duidelijk dat de ene kleur donkerder is dan de andere. Dat ene feit stuurt elke regel hieronder.

## Een kleurenblind vriendelijk palet om te kopiëren

De bekendste veilige set is het palet dat Masataka Okabe en Kei Ito voorstelden voor wetenschappelijke figuren. De acht kleuren zijn gekozen om onderscheidbaar te blijven bij de gangbare vormen van kleurenblindheid, en het werkt even goed voor grafieken, kaarten, labels en statuskleuren in een product.

- Zwart #000000: #000000
- Oranje #e69f00: #e69f00
- Hemelsblauw #56b4e9: #56b4e9
- Blauwgroen #009e73: #009e73
- Geel #f0e442: #f0e442
- Blauw #0072b2: #0072b2
- Vermiljoen #d55e00: #d55e00
- Roodpaars #cc79a7: #cc79a7

Het Okabe-Ito-palet. Gebruik zo weinig kleuren als nodig. Vier of vijf is voor iedereen prettiger dan acht.

Voor merkwerk zijn acht kleuren meestal te veel. Het veiligste enkele paar is **blauw en oranje**: ze liggen aan weerszijden van de rood-groenverwarringslijn en verschillen in helderheid, dus ze lezen voor bijna iedereen als verschillend. Blauw met geel en donkerpaars met lichtgroen houden het ook goed vol.

### Verlopen en schalen voor data

Gebruik voor heatmaps en grafieken die een bereik tonen een schaal waarvan de helderheid gestaag verandert van het ene uiteinde naar het andere. Een schaal van rood naar groen faalt dubbel: de uiteinden verwarren kleurenblinde lezers en beide uiteinden zijn vergelijkbaar in helderheid. Blauw naar oranje of één tint van donker naar licht werkt voor vrijwel iedereen.

- Vermijd: rood naar groen: `linear-gradient(90deg, #d7263d, #f5f5f5, #2e9e44)`
- Veilig: blauw naar oranje: `linear-gradient(90deg, #0072b2, #f5f5f5, #e69f00)`
- Veilig: donkerpaars naar geel: `linear-gradient(90deg, #440154, #3b528b, #21918c, #5ec962, #fde725)`

De laatste schaal volgt de veelgebruikte viridis-kleuren: de helderheid stijgt gelijkmatig, dus hij overleeft zelfs afdrukken in grijswaarden.

## Paren om te vermijden en wat je ervoor gebruikt

Sommige combinaties veroorzaken steeds problemen. Het rood `#d7263d` en groen `#2e9e44` hierboven lijken voor de meeste mensen duidelijk verschillend, maar hun waargenomen helderheid is bijna gelijk (rond 57% en 62% in [OKLCH](https://gradiently.design/nl/guide/oklch-explained)), dus voor iemand met deuteranopie blijft er weinig over om ze uit elkaar te houden.

### Vermijd naast elkaar

- Rood en groen met gelijke helderheid
- Groen en bruin
- Blauw en paars
- Lichtgroen en geel
- Roze en grijs, of geel en lichtgrijs

### Gebruik in plaats daarvan

- Blauw en oranje
- Donkerblauw en lichtgeel
- Donkerpaars en lichtgroen
- Eén tint in duidelijk verschillende helderheidsstappen
- Elk paar plus een label of icoon

Als je merkkleuren rood en groen zijn, hoef je ze niet te veranderen. Maak er gewoon één duidelijk donkerder dan de ander en gebruik ze nooit als enig verschil tussen bijvoorbeeld winst en verlies. Een pijl of een plus- en minteken lost het voor iedereen op. Hoe je de kleuren in de eerste plaats kiest, lees je in [merkkleuren kiezen](https://gradiently.design/nl/guide/how-to-choose-brand-colors).

## Vertrouw nooit op kleur alleen

Dit is de regel die het meest telt, en hij maakt ook deel uit van de Web Content Accessibility Guidelines. Als een grafiekenlegenda, een formulierfout, een badge voor op voorraad of een kaart alleen in kleur verschilt, missen sommige lezers de betekenis. Voeg een tweede signaal toe:

- **Labels** direct op grafieklijnen en staven in plaats van een kleurenlegenda.
- **Iconen** voor statussen: een vinkje voor succes, een kruis of waarschuwingsteken voor fouten.
- **Patronen of lijnstijlen**, zoals gestreepte en doorlopende lijnen, in grafieken.
- **Positie en volgorde**, zodat het eerste item altijd hetzelfde betekent.
- **Tekstcontrast** dat op zichzelf slaagt, gecontroleerd met een [contrastcontrole](https://gradiently.design/nl/guide/color-contrast-accessibility).

Socialgraphics vragen om dezelfde zorg. Een post die zegt “groen betekent beschikbaar” boven een rood-groene agenda verliest een deel van de lezers. Woorden dragen het beter, en de woorden zelf moeten leesbaar zijn tegen de achtergrond, vooral op verlopen, waar het contrast over het beeld verandert. [Tekst op verlopen](https://gradiently.design/nl/guide/text-on-gradient) behandelt dat uitgebreid.

Een workshopaankondiging waarbij de kop op een drukke plek van het verloop staat, met weinig helderheidscontrast

Als letter en achtergrond dicht bij elkaar liggen in helderheid, doet de tint al het werk, en dat is precies wat sommige lezers kwijtraken.

Dezelfde workshopaankondiging met een rustiger, donkerder gebied achter de kop, zodat hij duidelijk leesbaar is

Met een rustig, dieper gebied achter de woorden zit het contrast in helderheid, die elke lezer kan zien.

Die rechterversie is wat een Gradiently Mark vanzelf doet: hij verplaatst zijn rustigste, best contrasterende gebied achter de tekst en auto-ink kiest lichte of donkere letters per regel, zodat de scheiding uit helderheid komt in plaats van uit tint.

## Hoe test je een ontwerp op kleurenblindheid

1. **Doe de grijswaardencheck** Exporteer of maak een screenshot van het ontwerp en zet het om naar grijswaarden. Als twee kleuren met een verschillende betekenis hetzelfde grijs worden, wijzig dan de helderheid van één ervan.
2. **Simuleer in de browser** Open in Chrome of Edge de devtools, open het commandomenu, typ Rendering en gebruik **Emulate vision deficiencies** om de live pagina te zien als protanopie, deuteranopie, tritanopie of achromatopsie.
3. **Bekijk je hele scherm in grijs** Mac en Windows hebben allebei een grijswaardenfilter in de toegankelijkheidsinstellingen. Zet het aan om apps, ontwerpbestanden en exports te beoordelen, niet alleen webpagina’s.
4. **Haal de kleur weg en lees het opnieuw** Vraag je af of elke grafiek, badge en status ook zonder kleur, met alleen labels en iconen, nog klopt. Zo ja, dan is kleur decoratie, en daar hoort ze thuis.

Simulaties zijn benaderingen en kleurenzien verschilt van persoon tot persoon. Als toegankelijkheid voor je product belangrijk is, vraag dan kleurenblinde mensen uit je omgeving naar het echte resultaat te kijken. Voor grafieken specifiek bevat [infographic ontwerpen](https://gradiently.design/nl/guide/infographic-design) meer over labels en opmaak, en [kleurharmonie](https://gradiently.design/nl/guide/color-harmony) helpt als je een veilig palet nodig hebt dat er toch doordacht uitziet.

## FAQ

### Welke kleuren zijn het best voor kleurenblinde mensen?

Blauw en oranje zijn het veiligste paar, gevolgd door blauw en geel. Kies vooral kleuren die duidelijk in helderheid verschillen, zodat ze onderscheidbaar blijven als tinten op elkaar lijken.

### Wat is het Okabe-Ito-palet?

Een set van acht kleuren (zwart, oranje, hemelsblauw, blauwgroen, geel, blauw, vermiljoen en roodpaars) die is ontworpen om onderscheidbaar te blijven bij de gangbare vormen van kleurenblindheid.

### Welke kleuren moet ik niet samen gebruiken?

Rood met groen, groen met bruin, blauw met paars en lichtgroen met geel, vooral als ze vergelijkbaar zijn in helderheid.

### Hoe zie ik mijn ontwerp zoals een kleurenblind persoon?

Open in de devtools van Chrome of Edge het paneel Rendering en kies een optie onder Emulate vision deficiencies. Ook een snelle screenshot in grijswaarden laat kleuren zien die alleen op tint leunen.

### Moet ik rode en groene merkkleuren veranderen?

Nee. Maak er één merkbaar donkerder dan de ander en voeg labels of iconen toe waar de kleuren betekenis dragen.