Saturday, November 21, 2015

color - Background colour suitable for both black and white text


In my web page i have a black textured background and in foreground light blue, white, gray, yellow color texts are present. Colors that doesnt go with black color background are not visible. Can anyone suggest me a background color that goes with both black and white foreground text color?



Answer





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


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...