A feature in our system allows our customers to edit the background/foreground color of a page. But we need to have checks in place to make sure that the text is still readable.<p>Given two hex colors (eg: #ccc and #999), what is the best way to compare the colors in JS? Need to return an int 0...n (where 0 is exact match).<p>I have tried converting to decimal and checking the difference...but this isn't ideal. Couldn't find much on Google either.
<a href="http://www.hgrebdes.com/colour/spectrum/colourvisibility.html" rel="nofollow">http://www.hgrebdes.com/colour/spectrum/colourvisibility.htm...</a><p>Web Accessibility Guidelines from the W3C (and inadequate)
Color visibility can be determined according to the following algorithm:
(This is a suggested algorithm that is still open to change.)
Two colors provide good color visibility if the brightness difference and the color difference between the two colors are greater than a set range.
Color brightness is determined by the following formula: ((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000 Note: This algorithm is taken from a formula for converting RGB values to YIQ values. This brightness value gives a perceived brightness for a color.
Color difference is determined by the following formula: (maximum (Red value 1, Red value 2) - minimum (Red value 1, Red value 2)) + (maximum (Green value 1, Green value 2) - minimum (Green value 1, Green value 2)) + (maximum (Blue value 1, Blue value 2) - minimum (Blue value 1, Blue value 2))
The range for color brightness difference is 125. The range for color difference is 500.