Color Buddy – Track 1

Color Buddy Logo

Inspiration and Purpose

As students who are consistently creating designs for schoolwork and club events, we have realized that our designs may not be as visually appealing to those who have color vision deficiencies (CVDs), or colorblindness.

We have created Color Buddy, a tool that allows designers to understand what their designs may look like to people with various types of colorblindness. Through Color Buddy, we specifically show designers what their chosen colors look like to people with CVDs like protanopia (inability to see red), deuteranopia (inability to see green), and tritanopia (inability to see blue).

What Does Color Buddy Do?

Once designers input an RGB value, Color Buddy will provide visuals of how their inputted color would look to those with protanopia, deuteranopia, and tritanopia.

Our Color Buddy tool also includes an About Color Buddy tab, giving users more information about protanopia, deuteranopia, and tritanopia. This About Color Buddy tab aims to bring awareness to colorblindness, encouraging inclusivity.

The last tab, Credits, showcases the contributors of this project to add a more personal touch to the tool.

Building Color Buddy

We built Color Buddy using Python, JavaScript, and HTML/CSS. We have a Flask server that is part of the backend of our project – it takes color data and uses components of another one of our backend files (colorBuddy.py) to simulate how that color would appear to people with various types of colorblindness (protanopia, deuteranopia, and tritanopia). This Flask server interacts with the frontend and provides a connection between our user interface and our backend.

Overcoming Our Challenges

A couple small challenges we ran into were creating a working Flask server (took a lot of trial, error, and research) and that Python package installation would work for some teammates but not others. We were able to fix the package installation issue by researching many different commands that work for different systems (Mac, Windows).

A big challenge at the core of our project was that our initial goal to use the colorblind Python library did not really work out. Using this library proved to be difficult, as it was very time-consuming to get it to work, and it did not generate colors the way we wanted them to. We resolved this issue by implementing Machado et al. matrices (a function within the colorspacious Python library) instead, which ended up being much more efficient and easy to use in terms of generating accurate colors that people with different CVDs see (more info on Machado et al. matrices provided in our README file).

Accomplishments

We are very proud of the entirety of this project, but we are most specifically proud of the fact that we were able to generate and simulate colors based on an inputted RGB value. For a few of us, this was our first time working with Flask and JavaScript, and we are ending this hackathon with new knowledge and strengths! It was also really cool to see our animations in JavaScript enhance our frontend design and make it more modern/fun to use.

Learning Experience

We learned a lot about Flask and connecting the backend side of things to a frontend. It was also very interesting to read up about Machado et al. matrices and how they work. Not only did we develop new technical skills, but we also learned a lot about colorblindness and research in that area. The research that we conducted on CVDs only strengthens our belief that more people should be aware of colorblindness and how it affects what people can see. You can find more information about how Machado et al. matrices work in our README file in our GitHub repo.

Next Steps

We believe that the next step for Color Buddy is to implement a feedback component that gives designers strong suggestions for how they can alter their designs to make them more visually appealing to people with different CVDs. We are thinking we could possibly accomplish this using a machine learning model or some sort of AI chatbot, but it's definitely something we want to explore :)