JavaScript color contrast

Question

I am looking for a technique in which we could programmatically select the best color contrast for applying different (unpredictable) background colors to the text through HTML elements.

Since the HTML elements will have different colors, we are looking for a technique that can determine the color of the content behind the text, and then adapt the color of the text to use the one that has the best contrast.

I am sure that this cannot be just CSS, I was looking for jQuery solutions, but could not find anyone ... who has the key?

[UPDATE]: Based on the first answers, I think I need to rephrase. Imagine that I am creating an image-sharing service, and I want people to be able to tag photos themselves. Images can be any color. How can I choose the right tag color for every other image?

Answer 1

I think that this can save any future researchers a little time, it works great for me. Connect the red green and blue values ​​to the function and display “dark text” or “light text”.

var darkOrLight = function(red, green, blue) { var brightness; brightness = (red * 299) + (green * 587) + (blue * 114); brightness = brightness / 255000; // values range from 0 to 1 // anything greater than 0.5 should be bright enough for dark text if (brightness >= 0.5) { return "dark-text"; } else { return "light-text"; } } 

Using some code from http://particletree.com/notebook/calculating-color-contrast-for-legible-text/ from @David's answer.

Answer 2

Take a look at http://www.0to255.com . Just an instant look at the gradients presented on the site will light you up. You will have to guess, but only about 20 seconds. This is a great site for such problems and a terrific source of ideas for software solutions. And there is no math there: just plug in a few bytes for rgb vals and go.

Answer 3

This is my fav resource for calculating the readability (contrast) of two colors.

W3C offers a contrast ratio of at least 5: 1 between text and background behind text http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/Overview.html#G18

On the page:

The compliance metric shown above corresponds to the highest compliance rate. The WCAG 2.0 level level and the proposed level of compliance with level 508 requirements is based on achieving a contrast ratio of 3: 1 for text with a size of 18 points (14 points if highlighted in bold) or greater than or 4.5: 1 for text with a size less than 18 points. The AAA level matching level of WCAG level 2.0 is found when a contrast ratio of 7: 1 is reached for text less than 18 points and 4.5: 1 for text is 18 points (14 points if shown in bold) or more.

Answer 4

CSS now has a property called mix-blend-mode (currently only in draft) that you can use to achieve something similar to what you want.

 .contrasting-text { mix-blend-mode: difference; } 

CodePen put someone together demonstrating this: https://codepen.io/thebabydino/pen/JNWqLL

Answer 5

In one line, this solves the problem:

 function getContrast50($hexcolor) { return (hexdec($hexcolor) > 0xffffff/2) ? 'white':'black'; } 

If contrast needs to be reversed, then just white with black, and this is a trick. In php.