

Ask HN: Anybody know how to compare two colors in JS? - amarcus

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.
======
revorad
This js code for a color selector does a pretty good job of it -
<http://jscolor.com>.

------
amarcus
Got something that works well. Code available: <http://pastebin.com/MRxvi47L>

------
Charuru
[http://www.hgrebdes.com/colour/spectrum/colourvisibility.htm...](http://www.hgrebdes.com/colour/spectrum/colourvisibility.html)

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.

