13

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?

3
  • 8
    You have black, light blue, white, gray and yellow text and are looking for a background that works with black and white text? It'd be helpful if you could post a picture of your current design, because with this wide range of colors it kind of feels like you're asking us to make a corpse look like Kate Upton.
    – tohster
    Feb 18, 2015 at 6:28
  • 3
    A picture sure would help here.
    – DA01
    Feb 18, 2015 at 6:50
  • !enter image description here What color would you might be able to see for the text? Oct 3, 2018 at 14:38

6 Answers 6

13

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:

enter image description here

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:

enter image description here

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

enter image description here

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:

enter image description here

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:

enter image description here

0
5

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.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

4

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).

1
  • 1
    The second link is broken
    – ecc
    Oct 4, 2018 at 11:47
3

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?

3

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.

0

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.

1
  • White is the worst choice of background colour, because it produces the most intense glare -- glare which tires the eyes. Why not white text on a black background?
    – Rosie F
    Mar 18, 2021 at 19:31

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