Kleurenblindheidssimulator: zo zien kleurenblinde mensen je kleuren
Met de gratis kleurenblindheidssimulator zie je hoe mensen met protanopie (roodblindheid), deuteranopie (groenblindheid), deuteranomalie (verminderd groenzien), tritanopie (blauwblindheid) of achromatopsie je kleurenpalet en eigen afbeeldingen waarnemen. Alle vijf de varianten staan naast elkaar. Registratie is niet nodig: kleuren en afbeeldingen worden alleen in je browser berekend en nooit geüpload.
Gebouwd door Justin Schuessler
Ontwerp gecontroleerd op toegankelijkheid? Zet je site online met snelle, betrouwbare webhosting.
Kleur bewerken
Wordt hieronder direct live berekend voor alle gesimuleerde varianten. Kies hieronder een kleur uit je palet om die hier te bewerken.
Jouw kleurenpalet
Klik op een kleur om deze bovenaan in de kleurkiezer te bewerken. Met het plusteken kun je meer kleuren toevoegen en je hele palet tegelijk in elke gesimuleerde variant bekijken.
Gesimuleerd voorbeeld
Wil je ook controleren of jouw kleurenpalet voldoende contrast heeft? Controleer ook het contrast van je zojuist gesimuleerde palet
Verder met de geselecteerde kleur: Openen in de Color Picker · Kleurenschema maken
Draait volledig in jouw browser: er wordt niets naar een server verzonden, opgeslagen of gelogd.
Functies
Kleurenblindheid online simuleren: kleuren en afbeeldingen controleren
Naast eigen afbeeldingen kun je hier een heel kleurenpalet controleren via hex- of RGB-waarden. Handig voor webdesign, merkkleuren en diagrammen.
Vijf vormen van kleurenblindheid naast elkaar
Naast het origineel toont de simulator elke kleur tegelijk bij protanopie, deuteranopie, tritanopie, achromatopsie en deuteranomalie. Zo zie je in één oogopslag waar twee kleuren in elkaar overlopen.
Een heel kleurenpalet tegelijk controleren
Met het plusteken voeg je onbeperkt kleuren toe, bijvoorbeeld je volledige merkpalet. Onder elke kleur staat de hex-waarde en elke gesimuleerde variant toont het hele palet.
Kleurvlak, hex of RGB
Kies kleuren in het kleurvlak met de tintregelaar, voer een hex- of RGB-waarde in of laat een nieuwe kleur maken met ‘Willekeurige kleur’.
Eigen afbeeldingen simuleren
Upload eventueel een PNG of JPG tot 15 MB, bijvoorbeeld een screenshot, logo of diagram. Grote afbeeldingen worden voor het voorbeeld verkleind tot 1.600 px aan de langste zijde. Klik op een voorbeeld om het te vergroten.
Wetenschappelijk simulatiemodel
De simulatie is gebaseerd op het model van Machado, Oliveira & Fernandes (2009) en rekent in de lineaire RGB-kleurruimte. Kleurvlakken en afbeeldingspixels ondergaan dezelfde berekening.
Alles blijft in je browser
Kleuren en afbeeldingen worden rechtstreeks in je browser berekend. Niets wordt naar een server verzonden, opgeslagen of gelogd, en je hebt geen account nodig.
Soorten kleurenblindheid
Hoe zien kleurenblinde mensen kleuren? De vijf gesimuleerde vormen
De meeste kleurenblinde mensen zien wel degelijk kleuren, maar verwarren bepaalde tinten. Welke tinten dat zijn, hangt af van de vorm van de kleurenzienstoornis.
| Vorm | Zo zien kleuren eruit | Simulatie in de tool |
|---|---|---|
| Protanopie (roodblindheid) | Rood en groen zijn nauwelijks te onderscheiden. Roodtinten lijken donkerder en verschuiven naar olijf-, bruin- en geeltinten. | Volledige vorm (ernstgraad 1,0) |
| Deuteranopie (groenblindheid) | Rood en groen worden verward en lijken op vergelijkbare geel-, bruin- en olijftinten. | Volledige vorm (ernstgraad 1,0) |
| Tritanopie (blauwblindheid) | Blauw en groen, en geel en paars zijn moeilijk te onderscheiden. Geel lijkt lichtroze tot lichtgrijs. Rood en groen blijven daarentegen goed herkenbaar. | Volledige vorm (ernstgraad 1,0) |
| Achromatopsie (volledige kleurenblindheid) | Er worden vrijwel geen kleuren waargenomen, alleen verschillen in helderheid, zoals bij een grijswaardenafbeelding. | Relatieve luminantie (grijswaarden) |
| Deuteranomalie (verminderd groenzien) | Milde vorm van deuteranopie en de meest voorkomende vorm van kleurenblindheid: rood- en groentinten lijken meer op elkaar. | Milde variant (ernst 0,6) |
Probeer het zelf: voer #FF0000 in de simulator in, voeg met het plusteken een tweede kleur toe en stel die in op #00FF00. Op de kaarten voor protanopie en deuteranopie zie je meteen dat beide kleuren geel- en olijftinten worden en bijna alleen nog in helderheid verschillen.
Zo werkt het
Kleurenblindheid simuleren in 6 stappen
Van de eerste kleur tot de vergelijking van alle vijf de varianten, met je palet en eventueel een eigen afbeelding.
Stap 1
Kleur kiezen
Kies onder ‘Kleur bewerken’ een kleur in het kleurvlak met de tintregelaar, voer een hex- of RGB-waarde in of klik op ‘Willekeurige kleur’.
Stap 2
Kleurenpalet samenstellen
Voeg met het plusteken onder ‘Je kleurenpalet’ meer kleuren toe. Klik op een kleur om die in de kleurenkiezer te bewerken. Met het prullenbakpictogram verwijder je de kleur weer.
Stap 3
Optioneel een afbeelding uploaden
Sleep een PNG of JPG van maximaal 15 MB naar het veld ‘Eigen afbeelding uploaden’ of klik erop om een bestand te kiezen. De afbeelding blijft in je browser.
Stap 4
Varianten vergelijken
Vergelijk onder ‘Gesimuleerd voorbeeld’ het origineel met protanopie, deuteranopie, tritanopie, achromatopsie en deuteranomalie. Let op welke kleuren te veel op elkaar lijken.
Stap 5
Afbeelding vergroten
Klik op een voorbeeldafbeelding om die te vergroten en details te bekijken.
Stap 6
Verder werken met de kleur
Open de geselecteerde kleur via de links onder het voorbeeld in de Color Picker of de kleurenschemagenerator, of controleer het contrast ervan in de Contrast Checker.
Toegankelijke kleuren
Waarom rekening houden met kleurenblindheid in het ontwerp?
Rood-groene kleurenzienstoornissen treffen ongeveer 8 % van alle mannen en circa 0,5 % van alle vrouwen (vooral van Europese afkomst). Omgerekend naar de wereldbevolking gaat het naar schatting om ongeveer 300 miljoen mensen. Wie belangrijke informatie uitsluitend met kleur overbrengt, bijvoorbeeld rood voor ‘fout’ en groen voor ‘succes’ zonder extra symbool of tekst, sluit onbedoeld een aanzienlijk deel van de eigen gebruikers uit.
Daarom schrijven de WCAG voor dat kleur nooit het enige onderscheidende kenmerk mag zijn (succescriterium 1.4.1). Combineer kleuren met pictogrammen, patronen of labels en controleer in de simulator welke kleuren in je palet bij een kleurenzienstoornis te veel op elkaar lijken. Of tekst en achtergrond voldoende contrast hebben, controleer je daarna met de Contrast Checker. Naar de Contrast Checker
Meer ontdekken
Meer kleurtools
Controleer het contrast, pas kleuren aan, maak een kleurenschema of haal kleuren uit een afbeelding. Ook gratis in je browser.
Contrastcontrole
Bereken de WCAG-contrastverhouding tussen twee kleuren live en toets deze aan AA/AAA en UI-componenten, volledig in de browser.
Gebouwd door Justin Schuessler
Kleurkiezer
Kleuren direct omzetten tussen HEX, RGB, HSL, HSV en CMYK, de dichtstbijzijnde CSS-kleurnaam vinden en het WCAG-contrast met zwart/wit controleren – volledig in de browser.
Gebouwd door Justin Schuessler
Kleurenschemagenerator
Genereer live complementaire, analoge, triadische en andere kleurenschema's op basis van één kleur — niets wordt opgeslagen of verzonden.
Gebouwd door Justin Schuessler
Kleurkiezer voor afbeeldingen
Lees een kleurcode uit een afbeelding af: kleurenpipet met vergrootglas, HEX, RGB en HSL, het kleurenpalet van de afbeelding en een contrastindicatie. De afbeelding blijft in de browser.
Gebouwd door Dimitri Heissler
FAQ
Veelgestelde vragen over de kleurenblindheidssimulator
Korte antwoorden over kleurenzienstoornissen, toegankelijke kleuren en deze tool.
De meeste kleurenblinde mensen zien kleuren, maar verwarren bepaalde tinten. Bij protanopie en deuteranopie worden rood en groen vergelijkbare geel-, bruin- en olijftinten. Bij tritanopie zijn blauw en groen, en geel en paars moeilijk te onderscheiden. Alleen bij achromatopsie ontbreken kleuren volledig; dan blijven slechts helderheidsverschillen over, zoals in een grijswaardenafbeelding. In de simulator zie je dit direct met je eigen kleuren.
Vijf vormen naast het origineel: protanopie (roodblindheid), deuteranopie (groenblindheid), deuteranomalie (verminderd groenzien), tritanopie (blauwblindheid) en achromatopsie (volledige kleurenblindheid). Alle vijf worden tegelijk naast elkaar getoond, voor elke kleur in je palet en voor een geüploade afbeelding.
Rood-groene kleurenzienstoornissen komen het vaakst voor, vooral deuteranomalie, een vorm van verminderd groenzien. Ze treffen ongeveer 8 % van de mannen en circa 0,5 % van de vrouwen (cijfers voor mensen van Europese afkomst), wereldwijd naar schatting ongeveer 300 miljoen mensen. Ook vrouwen kunnen dus kleurenblind zijn, maar dat komt veel minder vaak voor.
Nee. De simulator laat zien hoe mensen met een kleurenzienstoornis kleuren waarnemen en is geen oogtest of diagnose. Wil je je eigen kleurenzien laten testen, ga dan naar een oogarts of opticien. Die kan bijvoorbeeld Ishihara-platen gebruiken.
De kleurenblindheidssimulator is gratis en zonder registratie te gebruiken. Afbeeldingen worden niet geüpload: de tool leest het bestand rechtstreeks in je browser en berekent de varianten via Canvas, zonder overdracht naar een server, opslag of logging. PNG en JPG tot 15 MB worden ondersteund. Voor het voorbeeld wordt een afbeelding verkleind tot maximaal 1.600 px aan de langste zijde. Sluit je het tabblad, dan verdwijnt de afbeelding.
Ja. Met het plusteken voeg je onbeperkt kleuren toe en zie je ze allemaal tegelijk in elk van de vijf gesimuleerde varianten. Klik op een kleur om die in de kleurenkiezer te bewerken. Met het prullenbakpictogram verwijder je de kleur weer. Zo ontdek je of twee kleuren in je palet, bijvoorbeeld je merkkleuren, bij een kleurenzienstoornis te veel op elkaar lijken.
De basis is het fysiologisch onderbouwde model van Machado, Oliveira & Fernandes (2009), met de daarin gepubliceerde matrices. De berekening vindt plaats in de lineaire RGB-kleurruimte na omzetting vanuit sRGB. Protanopie, deuteranopie en tritanopie worden in hun volledige vorm (ernstgraad 1,0) gesimuleerd, deuteranomalie met ernstgraad 0,6 en achromatopsie als relatieve luminantie. De ernst van een kleurenzienstoornis verschilt per persoon; de simulatie toont daarom een typische waarneming.
Vooral rood en groen zijn lastig, maar ook groen en bruin of blauw en paars, wanneer kleur het enige onderscheidende kenmerk is. Je hoeft kleuren niet helemaal weg te laten: vul ze aan met tekst, pictogrammen of patronen en controleer je palet in de simulator. Lijken twee kleuren in een variant bijna hetzelfde, pas dan de helderheid of kleurtint aan. Het contrast tussen tekst en achtergrond controleer je daarna met de Contrast Checker.
Nog vragen?
Contact opnemen met supportJe frontendproject heeft een betrouwbare server nodig
Een ZAP-Hosting VPS brengt je applicatie of project betrouwbaar online.
Geen installatie. Geen risico. Binnen enkele seconden online.
Op zoek naar meer tools? Alle beeld- en ontwerptools bekijken
