Kleurenbril

Kleurenbril

E-powermentKleurenbril

Je kleuren bij kleurenblindheid

We beginnen met rood, oranje en groen, zoals bij een stoplicht. Vervang ze door je eigen kleuren.

Je kleuren

Een kleurcode is een # met 6 of 3 tekens, zoals #1a2b3c of #abc.

Zo zien je kleuren eruit

Bij benadering: ieder mens ziet net anders, en je scherm doet ook mee.

  • Gewoon zicht

    Zo zie je het met gewoon kleurenzien.

    1. Kleur 1#d7263d
    2. Kleur 2#f4a300
    3. Kleur 3#2e9e44
  • Protanopie

    Het oog mist de cellen voor rood licht. Rood en groen zijn moeilijk uit elkaar te houden, en rood lijkt donkerder.

    Ongeveer 1 op de 100 mannen, bij vrouwen veel minder.

    1. Kleur 1#5f583c
    2. Kleur 2#bfa800
    3. Kleur 3#a0903b

    Geen kleuren die sterk op elkaar lijken.

  • Deuteranopie

    Het oog mist de cellen voor groen licht. Rood en groen zijn moeilijk uit elkaar te houden.

    Ongeveer 1 op de 100 mannen, bij vrouwen veel minder.

    1. Kleur 1#8a7d37
    2. Kleur 2#d2bb10
    3. Kleur 3#93864b

    Lijken sterk op elkaar: kleur 1 en 3.

  • Tritanopie

    Het oog mist de cellen voor blauw licht. Blauw en groen lijken op elkaar, en geel en roze ook.

    Heel zeldzaam.

    1. Kleur 1#ed0031
    2. Kleur 2#ff8e8b
    3. Kleur 3#009a8a

    Geen kleuren die sterk op elkaar lijken.

  • Achromatopsie

    Het oog ziet geen kleur, alleen licht en donker. Alles is grijs.

    Heel zeldzaam.

    1. Kleur 1#707070
    2. Kleur 2#b4b4b4
    3. Kleur 3#8a8a8a

    Geen kleuren die sterk op elkaar lijken.

Gebruik niet alleen kleur

Wie kleuren anders ziet, mist wat je alleen met kleur laat zien. Zeg het daarom ook op een andere manier:

  • Zet er een woord bij. Werk je met groen, oranje en rood, zoals in een signaleringsplan? Schrijf dan ook op welke fase het is.
  • Gebruik ook een vorm, een teken of een patroon, zoals een stippellijn naast een doorgetrokken lijn.
  • Zorg voor genoeg verschil tussen licht en donker. Dat check je bij

Dit is ook een eis uit WCAG, de internationale standaard voor toegankelijke websites en apps: succescriterium 1.4.1, niveau A.

Gemaakt met de Kleurenbril van E-powerment: e-powerment.nl/hulpmiddelen/kleurenbril/.

Zo werkt het

  1. Kies een stap boven het hulpmiddel: Kleuren, Plaatje of Contrast. Je kunt bij elke stap beginnen.
  2. Bij Kleuren: kies elke kleur met de kleurkiezer, of typ de kleurcode, zoals #2e9e44. Je ziet naast elkaar hoe ze eruitzien met gewoon zicht en bij vier vormen van kleurenblindheid, en welke kleuren sterk op elkaar gaan lijken.
  3. Bij Plaatje: bekijk het voorbeeld, of druk op Kies een eigen plaatje en kies een foto, een folder of een schermafbeelding van je apparaat.
  4. Bij Contrast: kies een tekstkleur en een achtergrond. Je ziet het contrast en of het genoeg is. Is het te weinig? Dan zie je een tekstkleur die erop lijkt en wel genoeg contrast heeft.
  5. Met Druk af, boven het hulpmiddel, komt alleen de uitkomst van de stap op papier. Die kun je met een collega of een ontwerper bekijken.

Vier vormen van kleurenblindheid

In je oog zitten cellen voor rood, groen en blauw licht. Werkt één soort niet, dan zie je sommige kleuren moeilijk uit elkaar. Ongeveer 8 op de 100 mannen en 1 op de 200 vrouwen zien rood en groen minder goed. De meesten van hen hebben een mildere vorm dan je hier ziet.

  • Protanopie. Het oog mist de cellen voor rood licht. Rood en groen zijn moeilijk uit elkaar te houden, en rood lijkt donkerder. Ongeveer 1 op de 100 mannen heeft dit.
  • Deuteranopie. Het oog mist de cellen voor groen licht. Ook dan zijn rood en groen moeilijk uit elkaar te houden. Ongeveer 1 op de 100 mannen heeft dit.
  • Tritanopie. Het oog mist de cellen voor blauw licht. Blauw en groen lijken op elkaar, en geel en roze ook.
  • Achromatopsie. Het oog ziet geen kleur, alleen licht en donker. Alles is grijs.

Tritanopie en achromatopsie zijn heel zeldzaam: ongeveer 1 op de 30.000 tot 50.000 mensen.

Goed om te weten

  • Een simulatie is een benadering. Ieder mens ziet net anders, en je scherm doet ook mee: de helderheid, de kleurinstellingen, een nachtstand.
  • Veel mensen hebben een mildere vorm. Zij zien iets tussen gewoon zicht en de simulatie in.
  • Tritanopie is het moeilijkst na te bootsen. Die simulatie is het minst precies.
  • ‘Sterk op elkaar lijken’ is onze eigen grens, geen officiële norm. Kijk dus ook zelf, en vraag als het kan iemand die kleurenblind is om mee te kijken.
  • Kleur alleen is niet genoeg om iets duidelijk te maken. Dat is een eis uit WCAG (succescriterium 1.4.1). Lees meer in Waarneembaar: niemand mist informatie.

Wat de regels vragen over contrast

Contrast is het verschil in licht en donker tussen tekst en achtergrond. Hoe hoger het getal, hoe beter de tekst opvalt. 1:1 betekent: geen verschil. 21:1 is het hoogste: zwart op wit. Over contrast gaan drie eisen uit WCAG (lees meer in wat is WCAG):

  • 1.4.3, niveau AA. Normale tekst heeft een contrast van minstens 4,5:1. Grote tekst minstens 3:1.
  • 1.4.11, niveau AA. Wat je nodig hebt om iets te zien of te bedienen, heeft minstens 3:1 tegen de kleur ernaast. Denk aan de rand van een invulveld, een icoon of een lijn in een grafiek.
  • 1.4.6, niveau AAA. Normale tekst minstens 7:1, grote tekst minstens 4,5:1.

Niveau AA is de gewone norm. AAA is strenger. Grote tekst is tekst van minstens 18 punt, of 14 punt als hij vet is. Op een scherm is dat ongeveer 24 pixels, of ongeveer 18,5 pixels vet.

  • We ronden niet af. Is het contrast 4,499:1, dan voldoet het niet aan 4,5:1. Het getal op je scherm is daarom naar beneden afgekapt: je ziet 4,49:1.
  • Logo’s en tekst die alleen versiering is, hoeven niet aan deze eisen te voldoen. Een knop die uit staat, ook niet.
  • Staat je tekst op een foto of op een kleurverloop? Check dan de plek waar de achtergrond het meest op je tekstkleur lijkt.
  • Een doorzichtige kleur kun je hier niet invullen. Gebruik de kleur zoals je hem op het scherm ziet, samen met wat eronder ligt.

Hoe we rekenen

Voor protanopie, deuteranopie en tritanopie gebruiken we het model van Machado, Oliveira en Fernandes uit 2009. Chrome en Edge gebruiken dat model ook in hun hulpmiddelen voor ontwikkelaars. Bij achromatopsie blijft alleen de helderheid over, berekend zoals in WCAG.

Het verschil tussen twee kleuren meten we in OKLab, een manier om kleuren te beschrijven uit de kleurenstandaard voor websites (CSS). Is het verschil kleiner dan 0,07, dan noemen we twee kleuren ‘sterk op elkaar lijkend’. Zwart en wit verschillen 1.

Het contrast rekenen we uit met de formule van W3C, de organisatie achter WCAG. Zo kun je het ook zelf doen.

Contrast zelf uitrekenen

  1. Schrijf de kleurcode als drie getallen van 0 tot 255: rood, groen en blauw. Elk paar tekens is één getal. De letters a tot en met f zijn 10 tot en met 15. Neem het eerste teken keer 16 en tel het tweede erbij op. Bij #1a2b3c is rood: 1 × 16 + 10 = 26.
  2. Deel elk getal door 255. Is de uitkomst 0,04045 of lager? Deel hem dan door 12,92. Is hij hoger? Tel er 0,055 bij op, deel door 1,055 en neem de uitkomst tot de macht 2,4.
  3. Reken de helderheid uit: 0,2126 × rood + 0,7152 × groen + 0,0722 × blauw. Je krijgt een getal van 0 (zwart) tot 1 (wit).
  4. Doe hetzelfde voor de andere kleur.
  5. Het contrast is: de hoogste helderheid plus 0,05, gedeeld door de laagste helderheid plus 0,05. Zwart op wit geeft (1 + 0,05) / (0 + 0,05) = 21, dus 21:1.

Je kleuren en je plaatje

Alles gebeurt in je browser. Je plaatje wordt op je eigen apparaat gelezen en gaat nergens heen. We bewaren niets: sluit je de pagina, dan is alles weg.

Bronnen

Gelezen op 28 en 29 september 2026.

  • SpelErvaring

    Hindernisbaan

    Probeer zelf hoe het is om een website te gebruiken als je slecht ziet, trilt, niet goed kunt lezen of alleen een toetsenbord hebt. Daarna repareer je de website en probeer je het opnieuw.

    Voor wie: Met je cliënt

  • CheckSchrijfhulp

    Alt-tekst hulp

    Schrijf een goede alt-tekst bij een afbeelding. Beantwoord een paar vragen en je krijgt advies en een voorstel dat je kunt kopiëren.

    Voor wie: Met je cliënt

  • CheckTekstcheck

    Taalcheck

    Check of je tekst makkelijk te lezen is. Je ziet lange zinnen en moeilijke woorden, met een makkelijker woord ernaast.

    Voor wie: Met je cliënt

Samen iets bouwen?

Stuur ons een berichtje als je een idee hebt, iets mist of een hulpmiddel wilt uitproberen met je team. Vertel in een paar zinnen waar het om gaat. We lezen alles, en het verplicht je tot niets.

Stuur een berichtje [email protected]