Designing games for accessibility (a11y) and UX for color perception


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:

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!! :slight_smile: Cheers.


Thank you!