Color Programmatic

Left side is normal view, right side is color blind view
Left side is normal view, right side is color blind view

cover

Inspiration 🧠

2 of 3 members in our group are into frontend web development. However, we never really thought about making out websites color blind friendly. Recently, one of use applied for a driving license and one of the required things was an eye checkup, which included test for color blindness.

From there, the discussion started that how do color blind people see the world? Using internet resources we found about the various types of color blindness that exist. It occured to us that the internet should be color blind friendly, since that where most of our stuff happen these days.

To test how color blind people will see websites - and also to ensure we build better designs next time - we decided to write Color Programmatic.

What it does 🤖

Color Programmatic simulates different types of color blindness on your webpage. This allows you to build websites that are friendly for color blind people.

Since this works in the browser, you can enable this on Figma too and see if your designs for other apps (not necessarily web apps) are color blind friendly too or not.

It also has two features for people with vision impairment. It can underline and draw boxes around hyper links. This will make it easy for people to spot them.

How we built it 🦾

The initial plan was to do selective hue rotation. The hues that aren't perceivable by color blind people could be shifted to the nearest perceivable hue. However, selective hue rotation turned out to be a tough job for us beginners.

We moved to the idea of applying filters that could simulate color blindness. We used JavaScript and the beginners docs from Chrome Developers page for Google Chrome extensions.

Challenges we ran into 🤔

The easiest problem we ran into were tiny bugs. JavaScript isn't a compiled language like Rust, so debugging took some time. But we got used to it pretty soon.

The main challenge was to write filters that simulated different types of color blindness. Initially, it was hit and trial to get close to the simulation, but soon we did fine tuning and the extension now gives more or less accurate results.

Accomplishments that we're proud of 🏆

This being our first hackathon, we are proud to have completed the project on time and have implemented most of the features we had planned to. We planned out for 3 filters, but we overshot our goal and have 8 filters now.