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:
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.
Pssst, hey you!
Do you want to get the sassiest daily tech newsletter every day, in your inbox, for FREE? Of course you do: sign up for Big Spam here.