Background colour suitable for both black and white text

  • 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?

    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.

    A picture sure would help here.

    !enter image description here What color would you might be able to see for the text?

  • kdbanman

    kdbanman Correct answer

    6 years ago

    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

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM