Skip to the content.

Complexion Cupid


Color matching can seem like a nightmare for anyone. Unfortunately, this task can be even more daunting for people with color blindness. Some services, like color matching, require an individual to visit a store physically. However, physically visiting a store is unattainable for several communities, including those living in rural communities and lacking stores with color-matching services, those with inaccessible public transportation to the stores, or even because traveling can be incredibly tiring. Recognizing these individuals’ unique challenges, we would like this program to simplify the color-matching process. Allowing individuals to upload an image of their skin, the program will provide users with a foundation match. Additionally, individuals can upload existing swatches on their skin and will be provided with filtered photos that better show the matching accuracy. With this information, we aim to make makeup an inclusive experience for all, regardless of experience level.

Swatch Symphony

We noticed several parts of our project were complete, but we couldn’t see them displayed on the front end, so Ruth stepped in! She connected the back-end portion (the filtered images) to the front end. As a result, we could see the two filtered images on our HTML skeleton. Next, Catalina took the lead on improving the machine learning model in “TensorShade.” This included having the machine learning model find much closer foundation matches than it previously found. Catalina also ensured that the CSS matched our current website theme since “TensorShade” originally had several contrast issues.

Last but not least, we had intended to test our project on color-blind individuals, but due to time constraints, we could not accomplish this task. However, we placed our images through an online color-blind simulator. Through this simulation, we analyzed how different types of color blindness will see our output-filtered images.

Disability Justice Perspective

Learnings and Future Work

How You Made Your App Accessible

We prioritized accessibility through automated testing using the WAVE extension, addressing issues like missing alt-text and labels. Manual testing involved navigating the website with a screen reader, ensuring a navigable and accessible interface. Aria-labels, alt-text, and specified hierarchy were added to enhance the user experience. We also confirmed that the website was navigable using only the keyboard. We also used a color-blind simulator to ensure that the filtered images were accessible to color-blind individuals. While a color-blind simulator is not a perfect representation of how a color-blind individual would see the images, it was a good starting point for us to ensure that the images were accessible to color-blind individuals. We also confirmed we were being inclusive by using a high-contrast color scheme and providing that the text was large enough to read and, if zoomed in, would not overflow.