Question

I have a <p> element inside a <div>. There are two possible colors for the paragraph text: white or black. This color is chosen randomly at run-time. The background div’s color is randomly chosen at run-time among 16 million colors. Because both of these processes are random, sometimes similar colors end up together and the paragraph text is very hard to see or can’t be seen at all.

Is there an algorithm out there that compares two colors to each other and returns, in percentage notation, how one would look on top of another?

This question was asking how similar two colors are: Color Logic Algorithm

I want to know how one looks when layered on another. For example, according to the function defined in the above post, yellow and white are not similar colors, but when white is written on yellow, the text can’t be seen easily.

Answer 1

This website should be of help:

http://24ways.org/2010/calculating-color-contrast

according to it, use this function to determine whether to use black or white on the bg color:

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) ? 'black' : 'white';
}

Of course, you will have to convert the colors to their hex values to use them.