Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

A New Top Bar for Stack Exchange says,

The first thing you’ll notice is that it’s really black*.

* Jin points out that technically it’s not quite black: it’s #212121.

In its CSS I see,

background: #2f2f2f;
background: rgba(0, 0, 0, 0.8);

Why not "really black": why is "not quite black" better?

Similarly, for the rest of the background I see something like,

background: #fdfdfd

Why not pure white?

I'm not asking about StackExchange specifically -- what I mean is, is this a good general rule for any/all web sites: when the design spec seems to ask for black or white, should I use almost black and white instead of really black and white?

Does this 'rule' apply to any other colors too (what is the rule, exactly)?

Is the rule device-dependent?

share|improve this question

2 Answers 2

In short, it's easy on the eyes;

'Simply put, contrast is the difference between two colors. On a web page, the amount of contrast required varies with different parts of the page. You usually want a high contrast between text and its background color. But too high contrast between design elements might give an unsettled and messy impression. Black and white create the highest contrast possible.' -Quote from here

This is a great site for UX colour suggestions/examples and theory. And discusses the contrast of different colours on background, even giving the hex code which is quite handy.

Contrast and colour balance is discussed here also.

This also seems to be a style that's trending because the lower contrast between bckgrounds makes the contrast of the text a little nicer(in my opinion) as seen with the colour here and here These samples are more for looking at the colour than their content in terms of what I want to communicate here.

It's not necessarily a rule more of a preference or style. It's more content-dependent than device-dependent. It's about where you want to have the most emphasis or focus - wherever that happens to be is where there should be the most contrast. In the case of StackExchange it's all about questions and answers so the body is where there is most contrast as that is where it is most relevant.

Good luck with your colour choices in future, this is another consideration to take into account :D

share|improve this answer
1  
I realize that answers here must be short, so thank you for using yours to provide links for further more detailed reading (I am a complete novice). –  ChrisW Dec 7 '13 at 0:54
    
Glad to help (if only a little). The answer for this question has 3 main components: colour theory, preference/style, and UX design. It's impossible to cover each one 100% in a single answer (as you've mentioned). So I just wanted to give you the short answer alongside an idea of what to explore. –  Jenna Dec 7 '13 at 1:04

A pure-black top bar would look very striking against the white background used by many websites, which is bad because the focus should be on the content rather than drawing the eye to the top of the screen. Making it lighter (gray) reduces the contrast between the top bar and the body's background.

However, a gray background on anything impedes legibility by reducing the possible contrast between text and background. The human eye is most sensitive to differences in brightness, so choosing a 50% gray means that no matter what text color you pick, you're using at most half the difference in brightness the user's screen can produce.

Hence, I think the choice of 80% black is a compromise between making the top bar less jarring and preserving contrast inside it.

For body text, you generally do want to use pure black against a light background, in order to maximize contrast and thus legibility. (This applies for both screen and print.) Notice that the background color for the body differs from pure white by only a tiny bit. In general, websites often choose backgrounds which are very slightly off-white. One purpose is to make the site feel warmer or cooler by picking a pale pink or blue (here it's a neutral gray though).

share|improve this answer
    
On this site even the div.post-text foreground color is color: #111; instead of pure black. Why not leave readability or screen brightness to the browser/device/user default to optimize? –  ChrisW Dec 7 '13 at 0:52

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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