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
add comment

5 Answers 5

up vote 48 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
1  
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
7  
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
    
@horatio I meant it was amber or green TEXT instead of white TEXT. –  DA01 Aug 24 '12 at 16:09
show 3 more comments

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
    
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
add comment

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
add comment

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
add comment

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

This post does not cite any references or sources. Please help improve this post by adding citations to reliable sources. Unsourced material may be challenged and removed.

    
Is there a particular study you can link to regarding the reading speed of black text versus grey text? –  Matt Obee 2 days ago
    
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 2 days ago
    
I would have thought it self evident - but here's a study. –  Tarian 2 days ago
    
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 2 days ago
add comment

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.