DressSense

Inspiration

I built DressSense for the 300 million people worldwide living with color vision deficiency. Something as simple as picking out a matching outfit — a task most people do without thinking — can be a daily frustration for colorblind and visually impaired individuals. I wanted to solve that with nothing more than a smartphone and a browser.

What I Learned

I deepened my understanding of the Web APIs available natively in browsers — particularly getUserMedia for camera access, the Web Speech API for text-to-speech, and the Vibration API for haptic feedback. I also learned how to build a color matching algorithm using Euclidean distance in RGB space, and how to make a truly accessibility-first UI that works for people with different needs.

How I Built It

DressSense is built entirely in vanilla JavaScript — no frameworks, no build tools, no installation required. The app captures a 100x100px region from the center of the camera feed, samples 25 pixels in a 5x5 grid, filters out outliers, and finds the nearest match in a curated palette of ~70 clothing colors using RGB distance. The result is spoken aloud, displayed in large text, and reinforced with a haptic vibration pattern.

Challenges

The biggest challenge was making the camera work reliably across both iOS Safari and Android Chrome — each browser handles getUserMedia and video rendering differently. Getting the color detection to be accurate enough to distinguish similar shades (like navy vs dark blue, or tan vs beige) in varied lighting conditions also required significant tuning of the algorithm.

Built With

• canvas-api
• css3
• getusermedia-api
• html5
• javascript
• vibration-api
• web-speech-api