How to calculate the best type colour for a random background colour?


I might need to present content at multiple levels depending on the distance of the observer to a display. Let's say from far away the user perceives a flat colour, but from a close distance the user needs to be able to read some text. The tricky part is the flat background colour is given/can change/I have no control over.

So far I've whipped out a really basic prototype to work out the text colour from the background colour (click to pick a random background). This is a very trivial approach: I take the hue and offset it by 90 degrees (so it's different enough) and invert the brightness in HSB color space so I get a colour that's different enough to be readable/have a decent contrast with the background.

This sometimes works:

good 1 good 2 good 3

sometimes doesn't:

bad 1 bad 2 bad 3

Is this approach good/in the good direction ? If so, how can I make this better ? If not, which direction should I follow ?

Unfortunately I don't know much about type and colour theory so any hints/tips from people with experience are very helpful. This will be displayed on a screen, not printed.

What relationships between background and foreground colours am I looking for ?

4/16/2013 2:54:00 PM

Accepted Answer

Readability is all about contrast. I'd try and determine how dark each background color is in greyscale, and if it is above a 50% grey (more dark than light), use white text, below 50% use black text. This will ensure that you have at least a 50% contrast (difference in tone) to make your text readable.

This method is a lot easier than trying to play with complimentary colors or inverting and guarantees maximum tonal contrast on any color.

4/16/2013 4:22:00 PM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow