Sunday, August 5, 2018

Choosing high contrast text color (in relation to background color) dynamically


My application has an area with some number of controls. Each control's background color expresses a state of some sort. The controls are also numbered via some text in their foreground. For example:


enter image description here


The problem is that I have been unable to find one color for the foreground text that contrasts well with all possible background colors. Also, I would like this to be dynamic if possible. Also, there are more colors than shown below. Specifically, yellow, which makes white text hard to see (I initially thought of using white for all but a white background, but this doesn't work out so well either)


So, my thought is to dynamically find a color of high contrast relative to the background at runtime. However, this means that the text will be colored differently across the controls, and I'm concerned that this may appear a bit odd or jarring to the user.



Has anyone else here had to tackle a similar problem? Does there exist a set of guidelines pertaining to the issue?



Answer



If you make your background colors light enough then the text can all be black...


enter image description here


Also, I made the numbering a darker version of the background color. The light gray numbering doesn't really work contrast-wise on anything but white. But dark red looks good on light red, for example.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...