I created a site a while back that had a table of data with a column that contained the status of each row. The status was color-coded : red for bad, light green for good, black for deleted, yellow for average etc. The problem I had was that the text color could not be seen for the darker background colors, because it was black. The solution was to use a formula to calculate the brightness of the background color and based on that value, change the text color to either white or black. The code was actually very easy to do, and here it is in C#:
Then the other day I saw that this was a priority requirement for the Launch Effect theme:
So I thought it would be a good exercise to try and do the same thing in jQuery and PHP. So that is what I did. And below are my findings.
First, The Theory Behind It
My original C# code was written with the help of an article written by Darel Rex Finley named HSP Color Model . Basically, the trick is to take the Hex color code (#336699 or #FFAA32 etc) and break it up into it’s RGB components : red, green and blue. Once you have that then you calculate a “brightness indicator” using this formula:
brightness = sqrt( .299 R2 + .587 G2 + .114 B2 )
The result is a number from 0 to 255. And then you simply use white text if that value is below 130 or otherwise you use black text. Simple
The Solution Using jQuery
Here is a demo page I put together using the technique.
Here is the code:
The Solution Using PHP
This turned out to be pretty simple in PHP too. Again, all I needed was a nice helper function to convert my hex color into an array of the red, green and blue intensities. I found this code snippet within the comments on the php documentation page for hexdec.
Here is the php demo.
And here is the code:
Hopefully this can help someone out there. If not, it was fun to put together in any case