ChromaVision

Which is worse? A world without colors or people with black and white worlds?

Comment

Inspiration

Coming into HackIllinois 2022, we were surprised to find that within our team, one of us is color blind and another is color deficient, with each having their own difficulties when browsing the web. This gave us a great deal of motivation to help beautify the worlds of our teammates as well as the other 8% of the total human population.

What it does

ChromaVision helps people with Color Vision Deficiencies to overcome difficulties and help improve their experience while browsing the web.

Technical Aspects

Since our website mainly serves users with color vision deficiencies, we decided to focus on polishing the frontend interface and functionalities to make our website accessible to users.

Front End As stated above, we strived to keep our front end sleek and clean. Most styling were styled with Bootstrap, along with some personalized stylings for our buttons and animations.

Back End We wanted to keep our backend simple, utilizing React components to make our code reusable and readable. Some difficult problems that we solved while developing the back end of our application were relaying information between our popup extension and the web browser and figuring out the different transformation values for the colors.

Challenges we ran into

Conceptually it was hard for us to pinpoint the exact needs of people with color vision deficiencies at first, but with extensive research on the difficulties that they face while browsing the web, along with inputs from our teammates, we designed a list of filters that could help improve their web browsing experience. Having to scour the internet as well as dozens of research papers to figure out the best values to transform the RGBA values of colors took a great deal of time and energy. With teammates residing in different time zones of almost 12 hours apart, it was hard coordinating together to come up with a common time for discussions. Being first timers with chrome extensions, it has also been a challenge figuring out the different aspects of the Chrome API to implement the best features for our users.

Accomplishments that we're proud of

Our final product was pleasant to the eyes and fully functional. The overall experience from the beginning to the end was seamless and accomplished our goals to make web browsing easier for people with color vision deficiencies. The color filters were a resounding success with multiple options for people with different color deficiencies, as well as a slider for users to customize colors to their own likings as we understand that not everyone views colors in the same way.

What we learned

One of the most important things we learned was the wide array of color vision deficiencies, as well as how each deficiency is different for the rest and how it affects the view of the user. Finally, we have also gained a lot of technical skills from working on this project. This included better experience with external APIs such as Chrome Web API and understanding web development workflows. Furthermore, we gained a lot of experience with collaboration - a skill that is hard to learn in a classroom setting.

What's next for ChromaVision

If ChromaVision continues to make progress, the next goals would be to implement the planned features that never fully made it into the final product. This would include furthering the extension's array of color vision deficiency, adding key bindings for users to easily turn on color filters or have the browsers already be color filtered when it is opened and getting valuable inputs from users to understand how we can help them better. However, as a whole, we strongly believe that this project will help guide us to new future projects and further our drive to continue to contribute to projects focused on social good.

Share this project:

Updates