24

Is there a single text color that, when used on either dark or light background, produces a readable (or at least tolerable) output?

If it makes it easier, constraints can be put on the hue, saturation or brightness of the backgrounds and/or the text color, as necessary.

Motivation: Although there may be other uses of this, my motivation is from a user's point of view. I prefer to use dark themes both on my OS and my browser, but many applications and websites set only either the background or the text color, while at the same time doesn't bother with setting the other one. The default theme in my OS and browser is dark text on light backround and that's what most applications expect. I would like to select a color that is acceptable when an application is not respecting my themes.

Improve this question
5
  • "I would like to select a color that is acceptable when an application is not respecting my themes." So are you actually asking for a text colour that will work for any arbitrary background colour, as this is not under your control?
    – e100
    Dec 17, 2012 at 10:52
  • @e100 ah you must mean the 'constraints can be put' part. I added that because I can imagine sg. like let's say '#770 is better than #777 on everything but light green' (not tested:)).
    – n611x007
    Dec 17, 2012 at 11:17
  • I have to say I don't think this is a real problem - at least for websites. How many sites really set background but not foreground colour? And surely a properly written user stylesheet will always override a website thus you can set both text and background.
    – e100
    Dec 17, 2012 at 11:27
  • @e100 how many websites - more than I (or you) would expect. For example (it's vice versa, but) msdn.microsoft.com/en-us/library/… and Gmail has only recently fixed it. So I would say major IT companies don't bother. Once you try it you will notice that there are many, many sites like this.
    – n611x007
    Dec 17, 2012 at 11:32
  • @e100 userstyles - I could use them but I really do not want to always override. I want a different default. Also this is just a motivation. My question was for a suitable color. Anyone messing around with light-on-dark themes/defaults (os,web,etc.) knows this is a problem more common you would think. :)
    – n611x007
    Dec 17, 2012 at 11:34

4 Answers 4

Reset to default
13

Try something around #777 grey. That should give you tolerable contrast on black or white.

Improve this answer
1
9

Having come across this problem myself, I find that the css colour orangered or #FF4500 works well on almost any colour background that is not reddish or orangeish.

enter image description here enter image description here enter image description here enter image description here

Improve this answer
4
  • Note that red also works, but is more harsh on the eyes than orange.
    – James Douglas
    Aug 18, 2020 at 10:19
  • You're a hero. Kudos
    – Artur Müller Romanov
    Nov 26, 2020 at 14:29
  • 1
    For text: Readable, but too hard on the eyes, for my taste.
    – msoutopico
    Nov 9, 2022 at 8:44
  • That seems to work perfectly for iconography, thanks (what I was looking for!), for text it might be a bit more subjective, but worth giving it a try.
    – Sevenate
    May 15 at 17:15
2

Does it have to look good? or just "work"?

If by working you mean sufficient contrast, then any middle tone should do. No?

As to looking good, I suspect that your problem statement is too ill-posed to ever find the one magic color that works well in all cases.

Improve this answer
4
  • Both; I'm happy with a working solution but would be definitely interested to find a method for finding a good-looking combination. Maybe for the latter I should ask then: given a light color A and a dark color B, how to find a color C that looks good on both A and B.
    – n611x007
    Dec 15, 2012 at 22:50
  • 1
    Well then the naive answer is (A+B)/2. Human visual acuity is poor at low and high brightness, ergo anything in the middle "works" to create a lot of contrast, but "good" is still too ill-posed.
    – DrFriedParts
    Dec 15, 2012 at 22:57
  • I see! thanks for the information. What would be a better question instead of 'good', with this intent?
    – n611x007
    Dec 15, 2012 at 23:01
  • 1
    This answer would be better as a comment on the original question.
    – e100
    Dec 17, 2012 at 10:53
0

I spent some time investigating and I believe any colors that follow the following HEX code will work:

#FF0099 - 255, 0, 153 - PinkPurple
#FF9900 - 255, 153, 0 - OrangeYellow
#99FF00 - 153, 255, 0 - Lime Green - NOT GOOD

#9900FF - 153, 0, 255 - PurpleViolet
#0099FF - 0, 153, 255 - BlueCyan
#00FF99 - 0, 255, 153 - Sea Green - NOT GOOD

This pattern places all of these color codes on the Web Safe list of colors. I was unaware of that before I started investigating this. For a full list of all the wev safe colors check out this website: https://websafecolors.info/color-chart

This is the website I used to check the colors (icons, not text unfortunately) on both light and dark background: https://notionicons.so/icon-set/atlas

#FF0099 - 255, 0, 153 - PinkPurple
#FF9900 - 255, 153, 0 - OrangeYellow
#66CC00 - 102, 204, 0 - GreenBlue

#9900FF - 153, 0, 255 - PurpleViolet
#0099FF - 0, 153, 255 - BlueCyan
#00CC66 - 0, 204, 102 - BlueGreen

Please be aware that the names I chose to describe the colors are not official names.

Looking at the colors of the icons as you switch a theme from dark to light several times can create optical illusions in which the colors appear to be different on different themes.

I have vision problems so I guesstimated about which colors they looked like when I flipped back and forth.

Improve this answer

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.