Background colour suitable for both black and white text

Question

On my web page I have light blue, white, gray, yellow-color texts on a black textured background. Colors that don't go with a black-color background are not visible. Can anyone suggest me a background color that goes with both black and white foreground text color?

Answer 1

Foreground light blue, white, gray, yellow color texts are present. Colors that don't go with black color background are not visible.

I'll withold judgement until I actually see an image or link to your design, but it sounds like you're already trying to mix oil and water. There probably isn't a background color to solve that problem, so let's address the more interesting question...

---

You ask for

a background color that goes with both black and white foreground text color.

The right orange (and many other hues) can pull that off. See this paletton, and imagine it with a heavier font:

The white and black text are acceptably readable (to me, at least). But that color as a full page background would be overwhelming. Here's the same palette desaturated a bit:

I think that looks ugly, but the black/white text is still fairly readable. Let's desaturate to almost gray:

Now it's more of a warm gray, and it doesn't look so bad. But we're starting to run up against the problem that ecc's answer mentioned. Let's fully desaturate to see what I mean:

Without the color saturation, the white and black text are too similar to the background, so they will be difficult and/or tiresome to read.

IMO, the second version (slightly desaturated) isn't overwhelming and the text contrast is acceptable. Too bad it looks like grasshopper vomit.

Finally, keep in mind that any of the above versions will look very close to the grayscale version under certain kinds of colorblindness (dyschromatopsia and achromatopsia). That's one of the reasons for this principle:

Background and text colors should have high value contrast, because hue and saturation contrast are too dependent upon individual perception and monitor/printer representation.

By using text that is white (value == 255) and black (value == 0), you are limited to a value contrast with the background of at most 127 (the middle of that range). For the sake of readability for most people on most devices, you should choose either bright text on a dark background, or dark text on a bright background. You can have bright text and dark text on the same page, just make sure they have different backgrounds:

Answer 2

I've been in that position. It never looks great. Considering that typically in design you want to a) avoid using pure black background and b) avoid low contrast between background and text, having a color that is in-between white and black will have very low contrast. If possible, try to rethink this design. It's hard to say without any pictures though.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

WCAG Guidelines state that readable text should have a contrast ratio of 4.5 or above. There are actually hundreds of colours within this range, and somebody has compiled a useful list of them (mouseover each block to grab the colour's hex code).

Answer 4

You could:

• change up the color scheme of your foreground text so you don't have both black and white
• have a background pattern that tastefully change color behind the different foreground text colors (you would need to make sure the placement works with different screen sizes and this would probably get quite complicated)

Also, suggest I checking out this extensive answer about color schemes and readability: Which color scheme to choose for applications that require long work hours?

Answer 5

I would suggest using any color that passes WCAG compliance test. There are rules around what combination of foreground and background colors at what font and size pass validation.

ContrastChecker.com is one of the websites allowing you to run such a test.

Answer 6

The best way is to use black text on white background. Avoid using any background color. DO one experiment on your own. Paste a 2000 word article on white background vs some other color and give it to your friends and family for reading and observe their expressions.