How to calulate contrasting but eye-friendly color pairs ?

Hi friends,

I have some visualisation project where textual info is displayed on a colored background (that is not disputable). The background color is meant to give a mental shortcut to the value, and it could be basically any color in the 3 byte RGB space. Nevertheless the textual info needs to be easily readable against the background.

I've found some algorithms to generate contrasting colors from background color by inverting (XOR with #FF) the R, G and B bytes of the background color, some with improvements for R/G/B values near 128. Unfortunately these algorithms generate some color combinations which are (to be very, very euphemistic) more insulting to the eye than mere unergonomic .

What I need is some algorithm that produces contrasting, but eye-friendly companion foreground colors out of the values of the background color values. (I'd take ready-to-use code, too ;-)

Any idea ?
LVL 14
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

☠ MASQ ☠Commented:
Just a suggestion - avoids calculation
frankhelkAuthor Commented:
That's an idea, but the font in that case needs to be not that big as the one you showed. I presume that it would effetively reder as some shade of grey, which would be nasty on gray background, I presume.
☠ MASQ ☠Commented:
Depends on platform and yes size may be an issue (anything from around 16-18pt and up should render OK) I have a similar "mental agility" app on my 'phone that does this and that's how it's managed and the display seems clear enough.  Depends on the amount of text too.
HTML5 and CSS3 Fundamentals

Build a website from the ground up by first learning the fundamentals of HTML5 and CSS3, the two popular programming languages used to present content online. HTML deals with fonts, colors, graphics, and hyperlinks, while CSS describes how HTML elements are to be displayed.

frankhelkAuthor Commented:
It's mainly some numbers on a regular PC monitor, but its size is 10pt ... that's too smal, I presume (and I can't make it bigger). That's the reason for changing the text color to somthing with a good contrast to the BG color.
frankhelkAuthor Commented:
I've found some pretty solution to the problem elsewhere:

To decide dynamically whether to use black or white text, calculate the gray-scale brightness of the background RGB for a “typical” monitor using the following formula:

Y = 0.2126 * (R/255)^2.2  +  0.7151 * (G/255)^2.2  +  0.0721 * (B/255)^2.2

If Y is less than or equal to 0.18, use white text. If it’s greater than 0.18, use black text. This will ensure your text will be legible, even for relatively small font. It will also ensure you are in compliance with WCAG accessibility requirements.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
☠ MASQ ☠Commented:
Nice solution, thanks :)
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.