16

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?

Improve this question
1
  • Please don't forget colorblind users, which cannot rely on color information alone. Consider adding some status text, background texture or icons with noticeably different shapes.
    – fri
    Jul 13, 2021 at 10:35

4 Answers 4

Reset to default
13

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.

Improve this answer
1
  • I like this. We were actually considering changing our theme to more matte, less saturated colors anyway. Good call.
    – Ed S.
    Jun 17, 2011 at 23:44
19

For text legibility, gray-scale contrast is more important than color contrast. Use either white or black text to achieve maximum gray-scale contrast for whatever the background color happens to be. Using black or white text will also avoid confusion on whether the foreground or the background color is the color code the user should be attending to.

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.

I’ve more details on contrast and color coding, including how to maximize the distinctiveness of the color codes from each other, at Breaking the Color Code.

Improve this answer
4
  • Thanks, that's great. I was going to try color contrast, but like you said, it doesn't work very well.
    – Ed S.
    Jun 19, 2011 at 1:12
  • +1 This is the same idea as my answer, but better worded, and with the formula.
    – Paŭlo Ebermann
    Jul 11, 2011 at 17:41
  • Exactly what I was looking for.
    – Trey Jackson
    May 15, 2014 at 4:06
  • In addition, Sass has the ability to detect color lightness and with a custom mixin, you can render white or black text on top of the chosen background color: thesassway.com/intermediate/…
    – bafromca
    Sep 17, 2014 at 21:16
2

I would simply use white for dark backgrounds (e.g. your lines 6, 10(?) and 12) and black for light backgrounds (the other ones), with the precise limit between the twice open for discussion.

I once tried to use a color as much away on the color wheel as possible, but it showed that either black or white were still better.

(This assumes that switching the foreground color depending on background color is doable here.)

Improve this answer
0

Why don't you just have a foreground color associated with a status the same way that you do a background color? Unless you have dynamically changing background colors (or a very large range of colors), changing the foreground color dynamically at runtime is overkill and a pretty big waste of processor resources.

Improve this answer
10
  • 1
    Changing the foreground color at runtime would be a one-time operation creating a lookup table. It would not be processor intensive. The background color gives a better overview of the state of the system as there are a lot of these controls on the screen (it is a domain specific thing, 400 slide capacity machine).
    – Ed S.
    Jun 17, 2011 at 23:44
  • @Ed - My point stands then, if you have a fixed set of colors, there's no reason you couldn't already have the foreground colors defined and stored as well. Even if it is a one-time operation, there's no reason to do it so why would you?
    – Charles Boyung
    Jun 19, 2011 at 12:19
  • 1
    Because if we ever want to change the colors I would rather not have to change the text colors too (though it's not like that would be unreasonable, and I would probably agree with it being overkill). The real problem was that the high contrast color thing just looked odd. I like the idea proposed above of lowering the saturation of the background and just using black.
    – Ed S.
    Jun 19, 2011 at 17:43
  • @Ed - you're talking about changing two colors instead of one. Two strings in a text file then a recompile. Sorry, don't see the value there.
    – Charles Boyung
    Jun 22, 2011 at 20:14
  • No, I'm talking about dynamically finding a text color that works for any background color.
    – Ed S.
    Jun 22, 2011 at 20:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.