-
-
How the visible light spectrum is normally seen
-
How the visible light spectrum is seen by individuals with protanopia
-
How trees are seen by individuals with protanopia
-
How trees are seen by individuals with protanopia with the filter applied, where the blue highlights what is normally perceived as green
💭 Inspiration
300 million people around the world suffer from colour-blindness. Affected individuals may have difficulty understanding images and reading text all due to colour schemes on websites. We want to solve this issue by creating a chrome extension that adjusts the colour of web components such as text, images and buttons based on the colour-blindness type selected (protanopia, deuteranopia, tritanopia, achromatopsia).
💻 What it does
enColor is an easy to use Google Chrome extension that uses DOM manipulation to change the colour of text and webpage components. For images, we use Python's OpenCV library to isolate the colour we want to change, then shift the colour with NumPy. The converted images are then returned through a Flask API to the front-end to replace the original images.
🔧 How we built it
We built the chrome extension using HTML/CSS and Javascript on the front-end. For the back-end, we used a Flask server to pass converted images to be displayed on the front-end. We used DOM mutation observing to monitor and change colours of website elements.
⚙️ Challenges we ran into
We had difficulties with setting up our Flask server and chrome extension, such as python package compatibility issues with OpenCV, abnormal document query selector behaviour when using a chrome extension, and dealing with webpages that don't load all their images at once.
⭐️ Accomplishments that we're proud of
There were several challenges that we overcame, from figuring out how to linearly scale colour to resolving CORS issues.
🧠 What we learned
We learned more intermediate HTML/CSS, UI/UX design, and how to implement it in a chrome extension. We also learned how to set up a Flask REST api that can handle file data, image processing with OpenCV, and DOM manipulations using chrome extension content scripts.
👀 What's next for enColor
We plan on implementing more flexibility with the color changing options, allowing for users to select from a larger variety of colors to change from and to instead of focusing on the main types of color blindness. We also plan on implementing WebGL to allow for color manipulation in videos.
Log in or sign up for Devpost to join the conversation.