top | item 29455628

Color Vision Simulation

101 points| sohkamyung | 4 years ago |developer.mozilla.org | reply

32 comments

order
[+] waynecochran|4 years ago|reply
It is always interesting for me, as someone who is colorblind (Protanopia), to see these. I always have to call my wife in and ask if the images look different. She is always amazed that I can't tell the difference.

The original image and the Protanopia image are exactly the same to me.

The Deuteranopi looks very slightly different -- if I really stare at it. The other do indeed look different.

[+] timebomb0|4 years ago|reply
This is really interesting to hear. I am also red-green colorblind (Protanopia) but the difference between the normal and Protanopia images here is very noticeable to me. I can see that red is missing in the Protanopia version.

I definitely have trouble with many shades of some colors, especially if the colors are really small on the screen.

So many Protanopia colorblind filters in games and apps mess up the colors way too much for me, and look worse and less visible than the non-colorblind normal color settings. Definitely interesting to hear about other colorblind users' accessibility issues.

There are so many degrees of colorblindness that accessibility is difficult to cover for all of us. I hope Mozilla and other developers are accounting for common colorblindness and testing with real colorblind people.

[+] shakna|4 years ago|reply
I have tritanopia, but the two images look vastly different to me. However, I'm fairly used to that. A lot of testing images tend to be hit and miss when dealing with blues.

However, show me a bright purple figure on a black background and I'll probably tell you it's blank.

[+] kingcharles|4 years ago|reply
> The original image and the Protanopia image are exactly the same to me.

What's even more fascinating is that, while these two images are very different to me, what you are actually seeing might be totally different to what I am seeing in the Protanopia image and we won't know.

[+] Perenti|4 years ago|reply
This tool deals with total colour loss, but does not allow for things like deuteranomaly which is far more common than Deuteranopia. Include a slider to simulate reduction in cones. As someone with deuteranomaly it's amazing how many interfaces just don't quite work.
[+] asicsp|4 years ago|reply
Seems like it used to be available before:

>Firefox 81 removed unnecessary simulations for protanomaly, deuteranomaly, and tritanomaly, and added a simulation for achromatopsia (no color).

[+] Agentlien|4 years ago|reply
In general I agree and have found it really hard to find tools which work well for different degrees of impaired colour vision. I've tried a few apps which are supposed to show how things look for me and the results are almost always not quite right.

I will say that I can barely tell the difference between the original example image on this page and the deuteranopia one. According to tests I have a moderate deuteranomaly.

[+] gorgoiler|4 years ago|reply
Let us hope this useful developer tool survives longer than some other parts of Firefox that were critical to my workflow:

RIP, 3D DOM View (2012 — 2016)

https://developer.mozilla.org/en-US/docs/Tools/3D_View

[+] goldenkey|4 years ago|reply
I'm sure you can do 3D DOM View as an extension with CSS transforms. It sucks they removed it but it wouldn't be terribly hard to implement in a day or two as a WebExtension/bookmarklet.
[+] rickstanley|4 years ago|reply
Not surprised Chromium added this after FF removed theirs.
[+] thedougd|4 years ago|reply
I have a minor color blindness, I believe on the red/green scale. I can't get all the circles with dots in them, and I've struggled to find online tests that could definitively call out my type of colorblindness. The results vary by test site. Each one of the pictures in the Mozilla link look different to me, and I can easily see the colors that might be missing to others.

I completely lose my mind when I find visualizations that use gradiants of red to green and brown. For example, a US state map that will have 7 different colors of red, green, and brown with a legend for each on the side. It's extremely difficult to line up which color is assigned to a state. Line charts are even worse. Please just use wildly different colors and if possible, label the lines directly.

[+] harvie|4 years ago|reply
There are "Enchroma" glasses, which increase color perception (in some cases) by blocking ambiguous wavelengths (particulary ones between red and green). These glasses are rather expensive, but it seems to me that such filter might be easily implemented on the electronic devices (eg. in the form of browser plugin).
[+] steerablesafe|4 years ago|reply
It's definitely not easy or even possible to enable from software. For all intents and purposes displays have three different light sources, with three different fixed spectrum. You can't block a narrow band from red and green pixels from software to make them less ambiguous.
[+] Agentlien|4 years ago|reply
I considered getting those, even had an appointment but it got cancelled. I've heard very varied things about them. Some people say they barely do anything, others have called trying them a life changing experience.
[+] nickloewen|4 years ago|reply
This is excellent! I have also found Sim Daltonism very helpful for testing out designs. They have a mac app that can add a colourblindness-simulating filter over an area of the screen, and an iOS app that can do the same with a live feed from the camera: https://michelf.ca/projects/sim-daltonism/
[+] aasasd|4 years ago|reply
From the title, I kinda expected a simulation of ‘full’-color vision for people with color vision loss.
[+] wila|4 years ago|reply
Cool.

Sadly the simulate button does not show up in any of my Firefox browsers (version 94.0.2)

Perhaps the feature requires a GPU feature not presented to the vGPU in my virtual machines?

Right.. booted up a physical box that I can access over RDP and there it does show up.

Would be nice to know the hardware requirements for the simulate option.

[+] jszymborski|4 years ago|reply
I'm so happy this is a thing. I try to make sure the figures I prepare for presentations/papers are readable for everyone, and I've had trouble finding tools that are flexible/practical.

Now I can just drop images in Firefox and use this tool!

[+] malwarebytess|4 years ago|reply
I wonder a lot of about whether people with color blindness miss detail in life and nature, and how that affects them. The color blind simulation images are so drab, lifeless, and seemingly devoid of detail compared to the full color images.
[+] Agentlien|4 years ago|reply
I love nature and its vistas but there have been times when I felt I was missing out. A few times family members have commented on the beautiful shades of green or a field of green with bright red flowers in. And I just look at it and see.. A big mass of solid green.
[+] Perenti|4 years ago|reply
We also see things you don't, as they're more obvious to us. Animal camouflage is a big one - animals are obvious to me that you struggle to see. Don't make the common mistake of thinking we chromatically challenged people are missing out, or disabled or something. We're the ones that will feed humanity during the nuclear winter.
[+] bobsmooth|4 years ago|reply
That's a great addition. I feel like accessibility for the colour-blind should be a really simple thing to implement for all developers.
[+] everyone|4 years ago|reply
I get... "Accessibility service can not be turned on. It is turned off via accessibility services privacy preference."
[+] throwoutway|4 years ago|reply
I had this on a todo list to develop as an extension! Glad that Mozilla beat me to it!