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:
sometimes doesn't:
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 ?
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.
No comments:
Post a Comment