We have 6 million photoreceptors in our eyes that determine the wavelength of the colors we can see by sending a signal to the brain identifying objects as blue, green or even purple! Color is nothing but our brain's interpretation of what we see. However, not everyone experiences perception the same way. 1 in every 12 men and 1 in every 100 women suffer from color blindness. Color blindness is a disability that exists in every country and I am sure we have all come across at least one person in our lives who struggled with this hidden disability.
Imagine sitting in a lecture hall and not being able to understand your Professor’s slides because they rely on colour coding. Do you announce your disability in front of all your peers? Picture a “problematic” young pre-schooler tearing off the paper of their crayons. Sometimes this is a system for colour blind children to identify the different colours of their crayons. Imagine sitting in a business meeting with slide after slide of charts using similar colours to distinguish information. When will workplaces be accessible for the visually impaired?
Our team identified the challenges we saw people facing in our daily lives and it has inspired us to make a difference and create a solution. Tackling SDG Goal 4 - Quality Education and Goal 10 - Reduced Inequalities, we want to address a problem that can help make society more inclusive and accessible.

What it does

Our web application allows a user to input an image URL and determine whether or not that image is visually accessible. This application can benefit anyone from teachers to sales people to even the medical staff globally by making their work more inclusive for those with color blindness. The feeling of inclusion creates a sense of belonging in the minds of people and would help them succeed in whatever tasks they take on.

How we built it

We built a web application using React, a JavaScript library and created an option for the user to upload an image. The dominant colors in this image are then extracted using an API call. The dominant colors detected would enable the user to identify images that are color blind friendly or not. This initial assessment would help the user design presentations, videos or any other visual content in a much more comprehensive manner addressing the needs of people who are color blind.

Challenges we ran into

The first challenge we faced was being remote during the Hackathon experience. The remote Hackathon being in 3 different time zones with some language barriers made it even tougher initially, but we did manage that pretty well and collaborated to create the desired solution. Our team had a mix of a graduate student and undergraduate students just in their 1st year. However, everyone had one common goal that brought us together - to have fun and learn as much as we can from our first hackathon ever!
We also faced technical challenges and decided to learn the technologies needed for our idea, instead of building an idea based on our skill sets. All of us would be leaving the hackathon with not just an amazing experience, but also having learned so many new technologies.
The final challenge we faced during our realization phase was the domain knowledge of knowing the different types of color blindness and the color threshold values it has. We discovered and learned so much about the different types of color blindness that exist and incorporated it in our solution.

Accomplishments that we're proud of

  1. We collaborated and understood one other so well to utilize the strengths and weaknesses of the team in just the first half an hour of talking!
  2. Ticked off one more programming language(React JS) off the To-do list
  3. Familiarized with the process of Discovery, Design and Realization.
  4. Created a usable solution in such little time!

What we learned

  1. Collaboration with Github
  2. Prototyping with Figma
  3. Application design
  4. React Js
  5. API Calls
  6. Various node packages
  7. Domain knowledge about Colour blindness
  8. To grow and help grow people on the team

What's next for Color Friendly

For now, our application only supports URL image paths, but it can be extended further to file types such as PDFs, presentation slides, graphs and more, providing a much better user experience. This would be a go-to tool for anyone who wants to review their content before presenting it to a larger audience. It could be extended to other types of technologies and platforms as well, like a phone app, or even a built-in extension that gives the user real time feedback of the issue.

Built With

Share this project: