Approximately 8 percent of the population are color blind. Our goal is to create a web app that tests if a combination of colors is color-blind friendly or if they will present conflicting colors. You can enter your color palette via hex color codes to receive possible conflicting colors. You can also enter the link to any website, and our app will retrieve the 10 most common colors that appear on that website, and return any possible conflicting colors.

Colora11y is a web app aimed at those without colorblindness, to help further understand how the choices we make regarding color combinations and design impact those with colorblindness. A user can choose their colors either via the color picker inputs, or by pasting a valid hex color code. They can also test an actively deployed website, and our app will fetch a screenshot of it, determine the top 10 most dominant colors, and test those. Our app is built on NodeJs and a very simple Express server for the backend, and simple vanilla JS, html, and css for the front end. The front end posts the user input colors to a specific route, and posts the link to another specific route.

In a nutshell, the color codes are transformed to the colors that a user with certain types of colorblindness would see, and those new colors are compared against the originals. Any colors that produce a high ratio mean information will be lost to the user with colorblindness, and such colors are marked and returned to the front end for display. A major initial challenge was figuring out how to convert the colors. Luckily, there exists an npm package called color-blind that does just that. Another major challenge was quantifying the differences between colors. Again, luckily, there exists an npm package called chroma.js that has the DeltaE color difference algorithm built in. One last major challenge was deploying the app. We used puppeteer to fetch the screenshot of the webpage, and puppeteer required some additional apt packages that Heroku does not initially supply. To fix this, we learned a lot about complex Heroku deploys with different build packs. We were able to find a build pack specifically for puppeteer, which automatically installs the needed apt packages.

If we had more time, we would’ve liked to add functionality that allows the user to see how users with certain types of colorblindness see the conflicting colors, rather than showing just the conflicting colors, to allow for a little more insight for those without colorblindness. This is more of a matter of just implementing it, as the features and data are all in place to make this work. Additionally, we would’ve liked to add functionality that suggest some alternative colors. This will take some additional thought on how to lay out the groundwork.

**Note about our video demonstration: the screen recording software did not record the additional pop up menu for the HTML color input

Built With

Share this project: