Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Why do a lot of websites use a text color other than #000000 black when the background is white?

For instance, this text will be displayed using a dark grey:

.post-text {
   color: #333;
}

Have some studies been made on that topic?

share|improve this question

8 Answers 8

up vote 62 down vote accepted

High contrast such as black on white can cause eye strain. Also there is evidence that it is particularly bad for people with dyslexia. For further info read articles at UX Movement and The Bristol Dyslexia Centre.

WCAG provide details on what is acceptable colour contrast, but dont state an upper limit. Personally, I like to use a different algorithm that provides an upper contrast warning. For further info, see this article at Spider Trax: "Does W3C Get Its Contrasts Wrong?"

Slightly off topic, but check out Contrast-A, a good tool made by Das Plankton for picking accessible color schemes.

share|improve this answer
2  
Yes, it's a contrast issue. That's also why early computer screens were green or amber on black rather than white. –  DA01 Jul 25 '12 at 15:33
12  
I think the choice of light text and black screen in old computer systems was a function of the slow refresh rates, rather than any concern for health or aesthetics. A full screen of "white" takes longer to paint, and a slower phospor response time (decay rate etc) makes each pixel linger. –  horatio Jul 25 '12 at 21:05
1  
+1 excellent sources –  greenforest Jul 26 '12 at 22:37
    
I think Sheffs answer is the right answer. A week ago I wrote a post about how somebody avoids black in his UserInterface layouts, because 1. It is unnatural and 2. Black overpowers everything else –  Peter Aug 21 '12 at 11:47
1  
As did I. reread what I wrote: I said that it was a functional choice rather than an aesthetic one. –  horatio Aug 28 '12 at 14:45

Off black colors (#333, #222, #2a2a2a, #444) simulates print material contrast on web typography. It can also improve readability more so than pure white and pure black as Sheff already stated above.

share|improve this answer
    
I'm a big fan of using #2b2b2b for body copy. –  Jimmy Breck-McKye Jul 30 '12 at 21:21
1  
Do you have a source for that statement? –  Tony Bolero Oct 2 '12 at 14:39
    
@TonyBolero Take a look around you with your own eyes at printed materials. The fact that monitors are back lit is what creates the harsh readability of pure black on pure white for web. You can get away with black on white for print easier than the web because the best white paper is never absolutely white and the best black ink is never absolutely black. Paper displays a different color, depending on the light source under which you are viewing it. So contrast on print material is never the same for anyone viewing the material. –  rohicks Oct 2 '12 at 18:40
    
@TonyBolero ...continued... To soften web contrast and make it more readable like print material you generally want to reduce to an off black or off white for users because they are viewing it on a monitor of some sort that's back lit. Creating problems when a pure black and pure white combination is in place. –  rohicks Oct 2 '12 at 18:41
    
Sounds legit. I have a discussion with a client and I want to show him some hard facts. –  Tony Bolero Oct 3 '12 at 7:41

Here's an interesting piece on this: Design Tip: Never Use Black

It's not a study, but I found that interesting. The thinking is that in real world thing's aren't really black on really white and that it didn't matter some time ago, but now the displays have such high contrast that pure black on white just isn't good for you.

share|improve this answer

Black text is not the problem. Glaring white background is. That background glare is the cause of eye-strain. Grey text just makes that worse as users often strain to read - which is why grey text often takes longer to read than black text. In fact, many people can "see" a whole page of black text and get a sense of the message in an instant - almost impossible to achieve such a quick scan with grey text. In this vein, white on black can be easier o the eye - although font and size are important. The Classic Windows Desktop (white on a mid-blue/grey) is very easy to read.

On a related matter, the trend to "Flat" design has seen entire pages turn white. Apart from the glare, clickable areas become indistinguishable from the passive areas. How does that improve usability? What's wrong with: - Menus / Links / Contents being on contrasting panels? -"Buttons" having shade, gradients or bevels? - Icons remaining multicoloured and textured rather than primtive and monotone?

share|improve this answer

Some of the information contained in this post requires additional references. Please edit to add citations to reliable sources that support the assertions made here. Unsourced material may be disputed or deleted.

    
Is there a particular study you can link to regarding the reading speed of black text versus grey text? –  Matt Obee Jul 22 '14 at 12:50
    
I like what you have to say about the glare. It feels to me like you veered off-course though when you started talking about affordance in flat design... –  Tim FitzGerald Jul 22 '14 at 13:21
    
I would have thought it self evident - but here's a study. –  Tarian Jul 22 '14 at 21:55
    
I would have thought faster reading with high contrast (blacker) is self evident - but here's a study. laurenscharff.com/research/agecontrast.html - and a report: journalofvision.org/content/5/8/812. The point about "flat" design is that it seems to go hand in hand with grey text - i.e. most "Flat" websites have acres of white space. It follows that with less text there is less content to be absorbed in a given time. Combine "flat" with grey text and some people won't bother returning. –  Tarian Jul 22 '14 at 22:02

Using black text on white background can obviously make your screen contrast. To make your screen comfortable to view, you can change the brightness and apply for an app called F.lux. This is a freeware to make your computer color automatically changed by the time of day, no-glare on your eyes.

Actually the color is not the point, the time on staring at it matters. And the most dangerous part of your monitor and computer screen is the blue light. It can easily hurt your ocular, bring eye strain and other problems. Know more dangers of blue light with human health is really important for the further eye protection.

share|improve this answer

Recently i have been involved in the building the UX of a social collaboration platform, and we were pretty serious about accessibility as well. As a part of complying to accessibility guidelines checking color contrast for key components communicating information was a major task. WCAG 1.4 (http://www.w3.org/TR/2005/WD-WCAG20-20050630/#visual-audio-contrast ) requires the color contrast to be within a certain level. I completely second the answer by sheff

share|improve this answer

When non-dark RGB colors on a screen are translated into XYZ colors in the eye and then to something similar to hue-saturation-lightness colors by the brain, small changes in RGB values will result in small changes XYZ which will then yield small changes to hue and saturation (which I will refer to collectively as chroma). When darker colors are translated to HSL, the same-absolute-size changes in RGB values will lead to larger changes in XYZ, and thus larger changes in chroma. When a darker area of a given hue/saturation is next to a lighter area with the same hue/staturation, the boundary will generally be blurred slightly (since the eyeball focuses well but not perfectly) but all areas on the boundary should have the same chroma. Even if there are non-linearities in the process of converting RGB colors in memory to XYZ colors in the eyeball, any consequent non-uniformity in the chroma will be slight.

With colors that are overly dark, however, tiny changes in RGB values may result in large changes in chroma. If there are any non-linearities in the process of converting RGB colors on the computer to XYZ colors in the eye, the variations in perceived chroma may be quite large. If an RGB value of (0,0,0) is perceived as though it's (0.0001, 0, 0) then it will appear reddish; if it's perceived as (0,0,0.0001) it will appear bluish. If one uses a background color of (96,128,128) and a foreground color of (3,4,4) the foreground and background will appear to have the same chroma. If instead one uses a foreground color of (0,0,0) the perceived chroma of parts of the text might not only differ from that of the background, but it could easily be non-constant and non-uniform. Even though the chroma of such dark objects isn't meaningful, that doesn't mean the meaningless chroma variations won't be distracting.

share|improve this answer

There is a problem for dyslexic readers by using extremely high contrast, but it has been greatly exagerated and propagated to the poin of myth (see this seminal report, which nevertheless recommends "to provide sufficient contrast between elements of a page" and "use a dark text on a pale background"). There's also a trend of abuses using unduly light grey text on white backgrounds propagated by popular blogs, mainly by designers trying to achieve a pretty effect, but hurting readability.

Numerous academic papers* show that high contrast text can be read faster than low contrast; the W3C web accessiblity guidelines provide a formula for minimum contrast (see AERT). The opinionated website ContrastRebelion.com provides a collection of links to academic research articles on text readability, and a rationale for avoiding light grey on white backgrounds.

*I tried to post a couple, but this site's reputation system won't let me post more than two links. Visit the links at ContrastRebelion site as the starting point for the actual research (I'm not afiliated with the site in any way).

share|improve this answer
    
If you have useful links you can still post them as text, and if they're OK one of the other users will edit them into your post for you. –  JonW Jun 15 at 13:43
    
Thanks, I didn't know that would work. These are the links I wanted to add: laurenscharff.com/research/text_display_lvs.html , jov.arvojournals.org/article.aspx?articleid=2132608 –  TuringTest Jun 15 at 15:57
    
The Jakob Nielsen group also reminds us that Low-Contrast Text Is Bad for Usability (But You Already Knew That). –  TuringTest yesterday

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.