Change text color based on background color in a div

Question

I have a div and have to place some text on it. The background of the div is generated dynamically. So i want to decide on the text color based on the background.

So far i have tried out this.

function invert(color){
   return (color.replace('#','0x')) > (0xffffff/2) ? 'black' : 'white'
}

using this i'm getting black for red. invert('#ff0000') => black (Though White looks better with red)

Is this approach ok? or is there any other better way..

Personally, I'd use rgb instead of hex to make it a little easier to do. Ex: — jsmith, Jun 21 '12 at 13:53
It's not as simple as black or white. Some hues will simply make your text muddy-looking regardless. See: http://web.mst.edu/~rhall/web_design/color_readability.html — Diodeus - James MacFarlane, Jun 21 '12 at 13:54
Although not as widely used, you might be able to use the [hsl format](http://css-tricks.com/yay-for-hsla/) for better/easier calculations. — atwixtor, Jun 21 '12 at 14:05

jsmith · Answer 1 · 2012-06-21T15:21:41.697

Here's a quick solution I came up with using jQuery in jsfiddle

Also note that if you use this method, the value for background-color can be anything from rgb(50, 205, 50) to lime to #32CD32 and it will still work.

For your html:

<div id="test" style="background-color: #000000;">Can you see this text?</div>

And the javascript:

$(document).ready(function(){
    var color = $('#test').css('background-color');
    var startIndex = color.indexOf('(') + 1;
    var lastIndex = color.indexOf(')');

    var values = color.substr(startIndex, lastIndex - startIndex).split(',');

    var r = 0;
    var g = 0;
    var b = 0;

    $(values).each(function(i) {
        if (i == 0) {
            r = 255 - values[i];
        }
        if (i == 1) {
            g = 255 - values[i];
        }
        if (i == 2) {
            b = 255 - values[i];
        }
    });

    $('#test').css('color', 'rgb(' + r + ',' + g + ',' + b + ')');
});

EDIT: the non-jquery way (doesn't work with color names like lime, blue, red, etc)

function invert(color) {
    var startIndex = color.indexOf('(') + 1;
    var lastIndex = color.indexOf(')');

    var values = color.substr(startIndex, lastIndex - startIndex).split(',');

    var r = 0;
    var g = 0;
    var b = 0;

    for(i= 0; i < values.length; i++) {
        if (i == 0) {
            r = 255 - values[i];
        }
        if (i == 1) {
            g = 255 - values[i];
        }
        if (i == 2) {
            b = 255 - values[i];
        }
    }
    return 'rgb(' + r + ',' + g + ',' + b + ')';
}

The only bits involving jQuery are getting and setting the `color` property, by the way. — BoltClock, Jun 21 '12 at 14:37
Good to point out... Alternatively you could use something like: var div = document.getElementById('test'); var color = div.style.backgroundColor; — jsmith, Jun 21 '12 at 14:52

score 1 · Answer 2 · edited May 23 '17 at 10:33

1

Use the approach outlined at the bottom of the top voted answer on this question - How to find good looking font color if background color is known?

edited May 23 '17 at 10:33

Community

1
1

answered Jun 21 '12 at 14:13

Jasper Mogg

924
2
8
23

its been 5 years since this answer has been provided. What if the top voted answer then is not the same now? what happens if the question gets deleted? what happens in case of link rot? – soulshined Nov 02 '17 at 02:15

score 0 · Answer 3 · edited Sep 13 '16 at 06:45

This will work for every color.

var luminance = {r: 0.2126, g: 0.7152, b:0.0722};
var color = '#ffaa11'; // your color
var r = parseInt(color.substring(1,3), 16);
var g = parseInt(color.substring(3,5), 16);
var b = parseInt(color.substring(5), 16);
var rgb = [r / 255, g / 255, b / 255];
for (var i = rgb.length; i--; )
    rgb[i] =
        rgb[i] <= 0.03928 ?
            rgb[i] / 12.92 :
            Math.pow(((rgb[i] + 0.055) / 1.055), 2.4);
var thresh = ((luminance.r * rgb[0]) +
              (luminance.g * rgb[1]) +
              (luminance.b * rgb[2]));
// now if thresh > 0.22 set text color to #222
// else set it to #ccc
// you now have readable text on every hex background.

Change text color based on background color in a div

3 Answers3