Hi,
This morning I was reminded about color spaces and how different people/devices have different perception of colors. I was thinking it would be cool if we had tooling to help us and made a demo. When we are designing a game or visual program it is not easy to see/imagine what other people see. On top of visual perception based on color blindness, some devices may have more or less capabilities than yours (ie: wide gamut or not). For example, as an amateur photographer I needed to learn about color profiles to manage what I was seeing (my wide gamut monitor has 1 billion+ onscreen colors) compared to what I would get from a printing lab or on a lower gamut monitor.
I did my first exploration of color spaces in university writing a program in C and assembly language to convert from YCbCr
(digital standard) to RGB
. Even rgb
has Adobe RGB, sRGB, NTSC and many other color spaces. If you dig more into colors then there is a tonne going on - it may take a few 3D diagrams and looking at formulas for it to make sense.
Here I want to explore using a shader to see how people with different color perceptions could visualize your game (even if you have “normal” vision)! So, I made a PostProcess shader and we can try out to find parts of our game/UX that are not friendly for color deficiencies. Maybe we could even write an assistance shader to push colors out of blind ranges?
So, you can try out red/green/blue color blindness/weakness as well as monochromatic. It is a post process, so you can run this while your game/scene is running and switch it on the fly (use drop-down in demo to change color blindness <–> normal). I am not 100% sure that I have implemented it correctly and would not be surprised if there were some inaccuracies, but perhaps it can serve as a starting point and if there is interest to perhaps bring some a11y tooling into the main project. It’s missing a low color gamut option and that would be useful, too.
Click “next image” to try out different Ishihara plate images:
https://brianzinn.github.io/post-process-a11y/
All code is on github (post-process-a11y/App.tsx at master · brianzinn/post-process-a11y · GitHub). Fully expect I will get schooled on the shader and code, if any experts are checking - looking forward to learning more!! Cheers.