This app tells you if your web design is accessible to the color blind

Built by Giovanni Scala, a developer living in Italy, Check My Colours is a web app for finding out how accessible your site’s design is for users with color blindness.

By comparing the foreground and background color combinations of all DOM elements, this app determines if designers have provided sufficient contrast for users with color deficits. It may sound tedious, but this process is just as important as labeling forms and adding alt text to images — creating a universally accessible web.

To use Check My Colours, type in your site’s address and you’ll quickly receive a list of where color contrast was adequate and where it can be improved. Then, you can go through the list and test out alternate options without ever leaving the app.

If you’re itching for the technical details, here’s the luminosity contrast ratio and color brightness measured by the site:

The 💜 of EU tech

The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!

Luminosity Contrast Ratio

(L1+.05) / (L2+.05) where L is luminosity and is defined as .2126*R + .7152*G + .0722B using linearised R, G, and B values. Linearised R (for example) = (R/FS)^2.2 where FS is full scale value (255 for 8 bit color channels). L1 is the higher value (of text or background) and L2 is the lower value.

Text or diagrams and their background must have a luminosity contrast ratio of at least 4.5:1 for level 2 conformance to guideline 1.4, and at least 7:1 for level 3 conformance to guideline 1.4.

Color brigthness (WCAG 1.0)

((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000
The range for color brightness difference is 125.
The range for color difference is 500.

According to Scala, all of the site’s tests are based on algorithms suggested by the World Wide Web Consortium (W3C). Of course, the site isn’t perfect: It can’t calculate the contrast ratios of text that overlays images. Other than that, many designers should find the site to be an incredibly useful reference point for considering color adjustments and making the web a better place.

➤  Check My Colours