Inspiration

We wanted to make a project that would help a group of people around the world. As we sorted through our options, we realized we had colourblind friends, who face difficulties everyday. Chloe shared and interaction she once had with her friend. When playing the game Valorant her friend complained about visuals being hard to see and objects blending in. We knew this was a problem that had to be solved and many people around the world have similar experiences, even simply on browsers. The convenience of a free easy to access dark mode chrome extension, inspired us to create this project.

What it does

A Chrome extension that adjusts colours on any website to be more legible for people who are colourblind with just the click of a button. When the user installs the extension it will be available for you to switch on anytime on any website. The pop up will give the user 3 options depending on which kind colourblind they have. The chrome extension we built detects the hues of the website and rotates it accordingly.

How we built it

The front end was made using figma and HTML and css. Using manifest.json we are able to create the chrome extension. We can change the colorus of the websites, like a darkmode extension would using javascript. We followed this tutorial link on how to make a Chrome darkmode extension and started from there.

Challenges we ran into

Figuring out how to start was the biggest challenge we ran into. We spent half the time, trying new things, with nothing working out, or seeming to lead anywhere. On the second night we considered restarting and coming up with a new idea. We were stuck, with no idea how to put our project together. We went back to the first step and started from there, looked over every line of code to realize what needed to be done. As we gathered every ounce of motivation we had left, our project finally began to snowball.

After that, we were able to solve and adapt to all the other minor issues we came into. For example, we could not animate the toggle buttons, so we changed the design of the entire buttons, and animated them so the colour of the text changes.

Accomplishments that we're proud of

We are extremely proud for us to considered this product as market ready as market ready gets in 37 hours. All we would need to do is, pay to be able to publish it to the Chrome Web Store.

What we learned

We learned how to create Chrome extensions. We also learned how to adapt to our circumstances and work together.

What's next for ColourFix

With the limited time we were not able to research and test all the kinds of colourblind. What's next is for our product have more versions and eventually support all types of colour blind.

Built With

Share this project:

Updates