Question

I have a nice script which lets you change the background color of a site. As I am using LESS CSS, I’m able to adjust the color of different sections of the site. For example:

@bgcolor: #bad2e3;

body {
    background-color: @bgcolor;
}
.section {
    background-color: (darken(@bgcolor,10%);
}

When a user chooses a background color, I can simply call less.refreshStyles(); and this works fine.

My problem is I need the body text to be change dependent on the background color. For example, a dark background color requires a light body text, and vice versa.

I could code this into the CSS, but this would mean specifying a body text color for each possible background color.

Is there a function, either using the color functions available in LESS, or using jQuery, where I can detect the darkness of the background color and change the body text color if necessary?

By way of example, 0to255.com shows light/dark text dependent on the background color.

Answer 1

This returns the background color of your body:

document.body.style.backgroundColor

Edit: Sorry missunderstood the question. In this link get color contrast you have a function to detect the contrast of a color in javascript:

function getContrastYIQ(hexcolor){
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'light' : 'dark';
}