Tell me more ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.
up vote 22 down vote favorite
13

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

4 Answers

up vote 33 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
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
3  
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
up vote 9 down vote

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
up vote 1 down vote

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
up vote 0 down vote

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

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.