Intelligent Color Detection

Question

We are working on a medical scheduling system that allows users to define colors to show on the calendar based on a certain status. The issue we have is that if the user picks a dark background color and we are using a dark font, the font doesn't show. Likewise if they pick a light color and we are using a light font. For a variety of reasons, we don't want to have the user setting both colors.

But, we wonder if there is a particular pattern to the hex codes of colors. Perhaps if it is less than a given value, a dark font should be used and a light font used otherwise?

So, is there an intelligent way to programatically pick the font color based on the user's choice of background color?

Amy

Computerish · Accepted Answer · 2011-04-10T19:11:10.087

11

You can use the hex codes to mathematically calculate the contrast between two colors. With that information the question is just which color of text (white or black) has more contrast with the chosen background color. This site shows how to write that code in PHP or Javascript, but it could easily be adapted to other languages.

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

edited Apr 10 '11 at 19:11

answered Apr 10 '11 at 19:04

Computerish

9,590
7
38
49

Perfect. :) Thank you. I shall accept this answer as soon as the system allows. – Amy Anuszewski Apr 10 '11 at 19:06
Can you write a summary, or at least an introduction in this answer? – Lekensteyn Apr 10 '11 at 19:07
The RGB hex code values are not perceptually uniform in anyway, and therefore they cannot be used to accurately predict contrast between colors. – Myndex Jan 19 '23 at 11:45

score 0 · Answer 2 · answered Jan 09 '15 at 20:42

Try this function;

function wc_light_or_dark( $color, $dark = '#000000', $light = '#FFFFFF' ) {

    $hex = str_replace( '#', '', $color );

    $c_r = hexdec( substr( $hex, 0, 2 ) );
    $c_g = hexdec( substr( $hex, 2, 2 ) );
    $c_b = hexdec( substr( $hex, 4, 2 ) );

    $brightness = ( ( $c_r * 299 ) + ( $c_g * 587 ) + ( $c_b * 114 ) ) / 1000;

    return $brightness > 155 ? $dark : $light;
}

Source: http://woocommerce.wp-a2z.org/oik_api/wc_light_or_dark/

score 0 · Answer 3 · answered Apr 10 '11 at 19:04

0

Color brightness: http://www.webmasterworld.com/forum88/9769.htm

But, actually, why not to just invert background and use resulting color is a foreground?

answered Apr 10 '11 at 19:04

Vladislav Rastrusny

29,378
23
95
156

Inverting gray gives just gray, this is not a good idea. Use either black or white (depending on which is more away), this is best to see (and also works for color blind people). – Paŭlo Ebermann Apr 11 '11 at 00:50

score 0 · Answer 4 · answered Apr 10 '11 at 19:07

For your first question, the hex values of color codes are in RGB format I believe. This means that the first byte is the amount of red-ness in the color; the second byte is the amount of green-ness in the color; and the third byte is the amount of blue-ness in the color.

If you wanted to try and guess a font color, you could try and see how close to #FFFFFF it is, and use a dark color if it is less than #777777.

I'm not a expert in colors by any means, so I won't guarantee the correctness of this answer.

score 0 · Answer 5 · answered Jan 19 '23 at 11:58

If all you want is a basic white/black color flipper, based on an unknown background color, the answer's actually very simple.

Andy's down and dirty luminance:

  let luminance = (sR/255.0)**2.2*0.2126 + (sG/255.0)**2.2*0.7152 + (sB/255.0)**2.2*0.0722;

Then flip when the background luminance is about 0.37:

function textColor (luminance) { return (luminance < 0.37) ? '#fff' : '#000' }

I discuss it at length here: https://stackoverflow.com/a/69869976/10315269

Intelligent Color Detection

5 Answers5

Andy's down and dirty luminance:

Linked