Kleurenblindheidsimulator

Bekijk je afbeelding door de ogen van iemand met een kleurzienafwijking. Kies het type, bekijk een voorbeeld en download het resultaat. Alles draait in je browser.

Hoe Kleurenblindheidsimulator werkt

Kleurenblindheid-simulator past kleurtransformatiematrices toe op je afbeelding om te laten zien hoe deze eruitziet voor mensen met protanopie (roodblind), deuteranopie (groenblind), tritanopie (blauwblind) of achromatopsie (volledige kleurenblindheid). De matrices worden pixel voor pixel toegepast via Canvas.getImageData() en Canvas.putImageData() in je browser. Er worden geen afbeeldingsdata naar een server verzonden.

De simulaties zijn gebaseerd op gepubliceerde perceptuele modellen afgeleid van studies naar kleurvisiestoornissen. Het zijn benaderingen van hoe het visuele systeem van een betroffen persoon kleur verwerkt, geen exacte reproducties van individuele ervaringen, die variëren. Het hulpmiddel is ontworpen om ontwerpers en ontwikkelaars te helpen contrast- of kleurcoderingsoproblemen te identificeren die een aanzienlijk deel van hun publiek zouden beïnvloeden: ongeveer 8 procent van de mannen en 0,5 procent van de vrouwen heeft een vorm van kleurvisiebeperking.

Geschreven door Bastien Sulyan

Hoe je Kleurenblindheidsimulator gebruikt, stap voor stap

Sleep je afbeelding naar het uploadgebied of klik om te bladeren.
Selecteer een type kleurvisiebeperking in het menu: protanopie, deuteranopie, tritanopie of achromatopsie.
Bekijk het gesimuleerde resultaat naast het origineel in het vergelijkingspaneel.
Schakel tussen simulatietypen om te vergelijken hoe elke aandoening de afbeelding beïnvloedt.
Gebruik de zij-aan-zij-weergave om gebieden te identificeren waar alleen kleur informatie overbrengt die mogelijk verloren gaat.

Veelvoorkomende toepassingen

Een UI-ontwerper controleert of een rood-groen statusindicator herkenbaar is voor gebruikers met deuteranopie voordat een functie wordt uitgebracht.
Een data-visualisatieauteur verifieert dat een meerlijnengrafiek met kleurgecodeerde reeksen leesbaar blijft in de protanopie-simulatie.
Een merkontwerper beoordeelt hoe een logo met gradientkleuren eruitziet onder achromatopsie om te zorgen dat het herkenbare vorm en contrast behoudt.
Een game-ontwikkelaar test of kleurgecodeerde kaartgebieden herkenbaar zijn voor spelers met tritanopie en voegt patroonvullingen toe om kleurcodering aan te vullen.

Veelgestelde vragen

Hoe nauwkeurig zijn de kleurenblindheid-simulaties?

De simulaties passen perceptuele transformatiematrices toe die zijn afgeleid van gepubliceerd onderzoek naar kleurvisiestoornissen. Het zijn wetenschappelijk onderbouwde benaderingen van typische gevallen van elke aandoening. Individuele ervaringen variëren: de ernst verschilt tussen mensen met dezelfde diagnose, en de simulatie kan geen rekening houden met compensatiestrategieën die sommige gebruikers ontwikkelen. Behandel de uitvoer als een nuttige indicator, niet als een definitieve test.

Dekt het hulpmiddel alle soorten kleurenblindheid?

De vier gedekte typen zijn de meest voorkomende vormen van kleurvisiebeperking en volledige kleurenblindheid. Afwijkende trichromatietypen (protanomalie, deuteranomalie, tritanomalie), die gedeeltelijke stoornissen vertegenwoordigen, worden niet apart gemodelleerd in de huidige versie.

Wordt mijn afbeelding op een server geanalyseerd om de simulatie te produceren?

Nee. De kleurtransformatie wordt lokaal berekend via Canvas.getImageData() om de pixelarray te lezen en Canvas.putImageData() om het resultaat te schrijven. Alle verwerking vindt plaats binnen het browsertabblad en de afbeeldingsdata blijft op je apparaat.

Kan ik dit hulpmiddel gebruiken om kleurcontrastverhouding te controleren?

Dit hulpmiddel toont hoe kleuren eruitzien voor mensen met kleurvisiestoornissen, maar berekent geen WCAG-contrastverhouding numeriek. Gebruik voor numerieke contrastcontrole het Kleurconverter-hulpmiddel, dat een WCAG-contrastchecker bevat.

Werkt het hulpmiddel met afbeeldingen die tekst bevatten?

Ja. De transformatie wordt toegepast op de gehele pixelarray, inclusief tekst die in de afbeelding is weergegeven. Hiermee kun je controleren of tekstkleur tegen de achtergrond leesbaar blijft onder elke gesimuleerde aandoening.

Gerelateerde tools

Houd alles lokaal, verken aanvullende tools.

Alle afbeeldingstools