ChromaVision

a simple browser extension for Color Vision Deficiency

Color Vision Deficiency (CVD)

1 out of 12

1 out of 200

300 million

men are colorblind

women are colorblind

people are estimated to have CVD

Accessibility for CVD

Problems

Struggles of CVD

People with CVD have trouble making out differences in colors in many websites, and hence miss out important web elements

Ignorance of CVD

Developers without CVD have not experienced CVD and may create websites without knowing if they are CVD-friendly

ChromaVision

Solution

Ignorance of CVD

Encourage everyone to

• empathise with people with CVD
• make an effort to design for accessibility

by adding different easy to use filters that simulate what people with CVD see

Struggles of CVD

Add easy to use filters that convert colours on webpages to be CVD-friendly

How it Works

Filters for 3 CVDs available: red-blind (protanopia), green-blind (deuteranopia), and blue-blind (tritanopia).

• Remove the deficient color from its respective RGB channel
• Add that color value as a ratio to the other two channels to increase contrast

ex: red-blind

What normal people see

What deuretanopes see

What deuretanopes would see with our extension

More examples

More examples

More examples

Tools used

Bootstrap

styling that adds symmetry and color

React

promote code reusability with react components

SVG filter

each color pixel transformed by a 5x5 color matrix

Google Chrome Extension

where ChromaVision lives!

Demo

What’s next?

• More Filters
• Better Filters
• More Options
• Usability Test

Sources

Zhu, Z., Mao, X. Image recoloring for color vision deficiency compensation: a survey. Vis Comput 37, 2999–3018 (2021). https://doi.org/10.1007/s00371-021-02240-0

Kulshrestha, Ruchi. “Review of Color Blindness Removal Methods using Image Processing.” (2013).

Anagnostopoulos, Christos-Nikolaos E. et al. “Intelligent modification for the daltonization process of digitized paintings.” (2007). https://doi.org/10.2390/biecoll-icvs2007-6

​