We had a group member at the start of the project who was actually colorblind, and we discussed how colorblind people are often overlooked when it comes to developing UI and other technology.

What it does

Kholo lets the user upload an image and simulate the 3 main types of colorblindness. It also gives the user a difference value, allowing them to quantitatively analyze how much different the image would be for a colorblind person.

How I built it

We built kholo using flask, python, html and css.

Challenges I ran into

No one in our group had ever worked with html, css, or any sort of web development before. At the start of our project we spent a long time figuring out how to work with flask. We had some difficulties uploading and displaying the images, properly formatting the text around the images, and connecting our code to simulate colorblindness to the our directories so it could be displayed in the html files. Later on in the project we ran into issues trying to give a value to compare the two images. We haven't yet reached a perfect solution, but there is a formula that can calculate the mean square error of the two images. The issue is that the number is not easily understood by the user.

Accomplishments that I'm proud of

For a group of people who had hardly ever touched html or css and had never even installed flask, we are very proud of the finalized website. We think the stylization looks really good, and the main functionality - uploading an image and simulating the 3 types of colorblindness - works exactly like we planned for it to at the start.

What I learned

We learned a lot about how to format an html site, how to make a css stylesheet, how to use flask to write websites with python, how to handle images in a directory, and how to host a website. I felt at the start that we had gone in way too deep with this project, but we definitely came out with so much more knowledge than we started with.

What's next for Kholo

I think we hope to finalize the initial plans of having a way to analyze the difference between the images to make it more useful for developers looking to change their UI or images. It would also be nice to add some information about the types of colorblindness or tips on what to change in the image to make it more accessible.

Built With

Share this project: