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

by amarcus on 1/17/2011, 5:14 AM with 3 comments

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.

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).

I have tried converting to decimal and checking the difference...but this isn't ideal. Couldn't find much on Google either.

  • by revorad on 1/17/2011, 12:59 PM

    This js code for a color selector does a pretty good job of it - http://jscolor.com.

  • by amarcus on 1/18/2011, 6:21 AM

    Got something that works well. Code available: http://pastebin.com/MRxvi47L

  • by Charuru on 1/17/2011, 5:18 AM

    http://www.hgrebdes.com/colour/spectrum/colourvisibility.htm...

    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.