HueHarmonics

Original Bird Image for Prototype Testing
Red-Green Color Blind Corrected Image
Yellow-Blue Color Blind Corrected Image
Initial Webpage Prototype with 2 Color Blindness Options
Farnsworth D15 Color Blind Test
Final Image-Upload Interface
Uploaded Image Preview

Inspiration

We were inspired by the everyday challenges faced by individuals with color vision deficiency — from reading graphs to interpreting UI elements or enjoying digital art. While tools exist to simulate or filter colors, most solutions are created for a specific category of color blindness and don't adapt to the user's unique visual profile or severity. We wanted to create something both fun (with an interactive test) and impactful (making art more accessible). And we wanted it to be personalized, data-driven, and practical.

That led us to our project — Hue Harmonics! A tool that combines an actual diagnostic test with real-time image enhancement to help make digital content clearer and more accessible for everyone!

What It Does

Hue Harmonics is a personalized and web-based application designed to help individuals with color vision deficiency see digital images more clearly. Here's how it works:

Takes a D-15 Color Vision Test Users take an interactive Farnsworth D-15 color vision test. Based on their arrangement of colored tiles, we calculate 3 metrics: confusion angle, confusion index, and total error score — which together define their unique type and severity of color blindness.
Stores Personalized Vision Data These results are automatically stored and used to build a custom color vision profile for each user — no manual input required!
Image Upload & Real-Time Adjustment Users can then upload any image. Our backend uses the test results to automatically adjust the image's colors by shifting hues and enhancing contrasts in directions the user can better perceive.
Instant Result The adjusted image is shown right away, helping users experience more vibrant and accurate colors!

How We Built It:

D‑15 Color Test Creation: We researched articles on the D‑15 test to obtain the standardized color cap coordinates. These coordinates were converted into a suitable color space (CIE 1976 u′, v′) so that we could quantitatively compare the colors. Our test displays a fixed “pilot” cap and draggable color caps. When users arrange the caps, our program computes three key metrics:
- Total Error Score (TES): Measures the overall ordering error.
- Confusion Angle (CA): Reflects the predominant direction of misordering (derived using PCA on the differences between adjacent caps).
- Confusion Index (CI): A normalized value that indicates the severity of color confusion.
Image Color Adjustment: Based on the test results, especially the CA, we calculate how much the user’s perception deviates from a “normal” baseline (the correct ordering). This deviation informs a hue shift that we apply to images. By converting images into the HSV color space, we adjust the Hue channel by the computed shift, making the colors more distinguishable for the user.
Backend
- Python: Main language used for all logic.
- Flask: Web framework to handle routing, API endpoints, and rendering templates.
- OpenCV: For image processing and adjustments in LAB color space.
- NumPy: For numerical calculations (PCA, vector math, etc.).
Frontend
- HTML: For structuring the web pages (D‑15 test interface, image upload, etc.).
- CSS: For styling caps, containers, and buttons

Challenges We Ran Into

1. Understand the Scoring of D15 Test One of the biggest challenges was interpreting how to accurately score the D‑15 test. There isn’t a universal formula for calculating the confusion angle, so we had to research various academic methods and implement our own approach based on principal component analysis (PCA) of the user’s cap ordering.

2. Mapping Test Results to Image Adjustments: Translating test results (like a confusion angle) into meaningful image enhancements was tricky. We had to find a balance between accuracy and visual improvement—adjusting too much could distort the image, while adjusting too little might not help the user. We end up using TES and CI to estimate the severity of the user’s color vision deficiency and adjust the strength of the color shift accordingly.

3. Time Constraints: As with any hackathon, we had to move fast and make quick decisions. There were features we wanted to explore more, but with the time limit we had to focus on getting the core features working.

Accompaniment That We’re Proud Of

Built a fully functional digital version of the D‑15 color vision test that can calculate test metrics, and successfully connected these results to a real-time image adjustment tool that adapts to each user’s unique color perception.
Learned how to work with color spaces (like CIE u′v′ and LAB) and applied that knowledge in a practical way.
Got everything working end-to-end under tight time constraints!

What We Learned

Understanding color vision deficiency more deeply: Working on this project helped us see just how differently people with color vision deficiency experience color. We had always heard about red-green color blindness, but we learned that there are actually several types, each affecting perception in its own way.

Confusion Angles: We came across the concept of confusion angles—directions in color space that relate to specific types of color blindness. Understanding these helped us get a clearer picture of how someone with a color vision deficiency might view an image, and how intentional design can make a real difference.

Working with color spaces: We learned how to convert and work across RGB, LAB, and CIE u′v′ color spaces to analyze colors more accurately and apply meaningful adjustments.

Collaborating under time pressure: With limited time, we had to communicate clearly, divide tasks efficiently, and stay focused on what would make the most impact.

What’s Next for HueHarmonics?

We want to add a side-by-side comparison feature so users can easily see the adjusted image next to the original (didn’t add due to time constraint). This would make the impact of the adjustment clearer and help users fine-tune the effect.
We’re also looking to build a cleaner, more visually appealing interface and possibly turn it into a web app or browser extension to allow for easier and quick access.
We'd like to explore other types of color vision tests—like Ishihara or additional arrangement tasks—to give a more detailed profile of color perception.