Kleurenblindheidssimulator
Upload een afbeelding en zie hoe die eruitziet voor iemand met verschillende vormen van kleurzienstoornis. Alle verwerking gebeurt in je browser — je afbeelding wordt nooit naar een server gestuurd.
Upload je afbeelding
Actief filter
Normaal
Gebruikelijke kleurwaarneming
Gesimuleerde weergave
Je gesimuleerde afbeelding verschijnt hier na het uploaden.
Over deze kleurenblindheidssimulator
Hoe het werkt
Deze simulator gebruikt kleurtransformatiematrices gebaseerd op het werk van Machado, Oliveira & Fernandes (2009) om de kleur van elke pixel om te rekenen naar hoe iemand met de betreffende kleurzienstoornis die zou zien. Alle berekeningen gebeuren lokaal in je browser met de HTML5 Canvas API.
Wie gebruikt deze tool
Ontwerpers en ontwikkelaars gebruiken deze tool om te controleren of hun interface, infographics, grafieken of marketingmateriaal toegankelijk zijn voor de ongeveer 300 miljoen mensen wereldwijd met een kleurzienstoornis. Vooral handig bij het toetsen aan de WCAG-toegankelijkheidseisen.
Protanopie
~1%
Roodblind. Geen kegeltjes voor lange golflengten (L).
Deuteranopie
~1%
Groenblind. Geen kegeltjes voor middellange golflengten (M).
Tritanopie
<0.01%
Blauwblind. Geen kegeltjes voor korte golflengten (S).
Achromatopsie
<0.003%
Volledige kleurenblindheid. Alleen grijstinten zichtbaar.
Waarvoor een simulator dient
Een kleurziensimulator is een ontwerpinstrument, geen diagnostisch instrument. U geeft er een afbeelding aan en krijgt een benadering terug van welke kleuronderscheidingen een bepaalde stoornis overleven en welke instorten. De waarde zit in wat instort. Betekenen twee dingen in uw interface iets verschillends en toont de simulatie ze in dezelfde kleur, dan hebt u een gebrek gevonden dat een aanzienlijk deel van uw publiek raakt.
Het is de moeite waard precies te zijn over wat de uitkomst niet is. Ze is geen venster op iemands subjectieve ervaring. Wie aangeboren deuteranomalie heeft, ziet de wereld zo sinds de geboorte; zijn kleurwaarneming is voor hem volstrekt gewoon, en bij bepaalde onderscheidingstaken presteert hij zelfs beter dan trichromaten. Een simulatie voorstellen als wat zij zien is onnauwkeurig en, wanneer het de toestand als gemis neerzet, ook niet behulpzaam.
Wat de simulatie werkelijk vertelt, is waar uw ontwerp afhangt van informatie die een aanzienlijke minderheid van kijkers niet ontvangt. Dat is een technisch feit waarmee te werken valt.
Het model achter de transformatie
Eenvoudige simulatoren klappen de afbeelding dicht op de lijn van kleuren die een dichromaat kan onderscheiden. Voor dichromasie volstaat dat, maar voor de veel vaker voorkomende anomale trichromasie klopt het niet: daar bestaat de aangedane kegel met verschoven spectrale gevoeligheid en wordt kleurinformatie samengedrukt in plaats van gewist.
Deze simulator volgt de fysiologisch onderbouwde benadering van Machado, Oliveira en Fernandes, die de verschuiving van de kegelgevoeligheid rechtstreeks modelleert. Omdat die verschuiving een continue parameter is, bestrijkt hetzelfde model het hele bereik, van normaal kleurenzien via lichte afwijking tot volledige dichromasie, in plaats van ze als losstaande gevallen te behandelen.
Dit onderscheid begrijpen verandert de manier van ontwerpen. Deuteranopie, waarbij de middengolvige kegel ontbreekt, is het strenge geval. Deuteranomalie, waarbij die kegel aanwezig maar verschoven is, is het gangbare geval, treft veel meer mensen en levert subtielere gebreken op: kleuren die technisch onderscheidbaar blijven maar in een dichte grafiek of een klein interface-element niet langer in één oogopslag uiteenvallen.
De uitkomst goed benutten
Laad een afbeelding die werkelijk betekenis via kleur draagt: een dashboard, een grafiek met kleurgecodeerde legenda, een kaart, een formulier met rode foutstatussen, een bewegwijzeringsschema. Vergelijk elke simulatie met het origineel en stel elk kleurgecodeerd onderscheid één vraag: vertelt dit de kijker nog steeds wat hij moet weten?
Veelvoorkomende gebreken om naar te zoeken:
- Rode en groene statusindicatoren die dezelfde doffe tint worden. Dit is het meest verbreide toegankelijkheidsgebrek in software.
- Categorische grafiekpaletten waarin aangrenzende reeksen samenvloeien, vooral kwalitatieve paletten die zijn gekozen op esthetische variatie in plaats van perceptuele scheiding.
- Sequentiële heatmaps die door rood en groen lopen en hun ordening verliezen.
- Links die alleen door kleur van de tekst verschillen en volledig verdwijnen.
- Verplichte velden en foutstatussen die alleen door een rode rand worden gedragen.
De oplossing is vrijwel nooit andere kleuren gebruiken. Ze is een tweede, niet-kleurgebonden aanwijzing toevoegen: een tekstlabel, pictogram, vorm, vulpatroon, positie of onderstreping. Kleur wordt dan versterking van de betekenis in plaats van de enige drager, en dat is wat het WCAG-criterium over gebruik van kleur verlangt.
Waar de simulatie niet langer betrouwbaar is
De transformatie wordt toegepast op de sRGB-waarden in uw afbeelding, dus de nauwkeurigheid wordt begrensd door hoe getrouw uw scherm sRGB weergeeft en door de vraag of het bronbeeld in die ruimte is gemaakt. Materiaal met een breed kleurbereik, HDR-inhoud en werkstromen met zwaar kleurbeheer verschuiven het resultaat alle drie.
Het model beschrijft bovendien aangeboren stoornissen. Verworven verlies van kleurenzien, door glaucoom, diabetische retinopathie, oogzenuwziekten, staar of geneesmiddelen, gedraagt zich vaak anders, treft de ogen dikwijls ongelijk en gaat gewoonlijk samen met verminderde scherpte of contrastgevoeligheid die geen enkele kleurtransformatie vat.
Onthoud ten slotte dat de simulatie maar één lens is. Ze zegt welke kleurtonen samenvloeien; ze zegt niets over de vraag of uw tekst überhaupt genoeg luminantiecontrast heeft om leesbaar te zijn. Combineer haar met de contrastcontrole.
Voor bredere richtlijnen, zie ontwerpen voor kleurenblindheid en grafieken toegankelijk maken.
Vragen?
Veelgestelde vragen
Alles wat je moet weten over kleurenblindheidstests: hoe ze werken en wat je met je resultaat kunt doen.
Zien kleurenblinde mensen het werkelijk zo?
Nee, en geen enkele simulator kan dat. Een simulatie toont op uw scherm met normale kleurweergave een benadering van welke informatie een stoornis overleeft. De subjectieve ervaring kan ze niet weergeven. Wie met een stoornis geboren is heeft het alternatief nooit gekend, dus zijn kleuren zijn voor hem eenvoudigweg normaal; hij ervaart zijn wereld niet als een verbleekte versie van de uwe. Gebruik de uitkomst om te vinden waar uw ontwerp informatie verliest, niet om andermans ervaring in te beelden.
Welk model gebruikt de simulatie?
Ze volgt de fysiologisch onderbouwde benadering van Machado, Oliveira en Fernandes, die de verschoven spectrale gevoeligheid van de aangedane kegel modelleert in plaats van kleuren simpelweg op een lijn te projecteren. Dat onderscheid doet ertoe bij anomale trichromasie, protanomalie en deuteranomalie, waar de kegel aanwezig maar verschoven is en de ernst geleidelijk varieert.
Waarom zien dichromasie en anomale trichromasie er zo verschillend uit?
Omdat het verschillende toestanden zijn. Bij dichromasie ontbreekt een kegelklasse volledig, dus verdwijnt de kleurinformatie op die as werkelijk en klapt de simulatie haar dicht. Bij anomale trichromasie bestaat de kegel met een verschoven piek, dus wordt informatie samengedrukt in plaats van verloren. Anomale trichromasie komt veel vaker voor, dus ontwerpen op alleen de dichromatische simulatie overdrijft het probleem op sommige plekken en onderschat het op andere.
Mijn grafiek blijft leesbaar in de simulatie. Ben ik klaar?
Nog niet helemaal. Een simulatie controleert of kleurtonen onderscheidbaar blijven, maar niet de contrastverhoudingen, en ze vangt de gevallen niet waarin kleur de enige betekenisdrager is. Draai ook de contrastcontrole en zorg dat elk kleurgecodeerd onderscheid een tweede aanwijzing heeft: een label, patroon, vorm of positie.
Uploadt de simulator mijn afbeelding?
Nee. De transformatie draait volledig in uw browser via een canvas-element. De afbeelding verlaat uw apparaat nooit en wordt nooit naar een server gestuurd.
Op welk type moet ik ontwerpen?
Controleer eerst deuteranomalie, want deutanstoornissen zijn veruit het meest voorkomend, daarna deuteranopie als het strengere geval. Voeg tritanopie toe als uw palet op blauw-gele onderscheidingen leunt. Een ontwerp dat deuteranopie en tritanopie doorstaat met zijn betekenis intact, doorstaat doorgaans ook de lichtere vormen.
Nog vragen? Neem contact op →