Update, Oct 2014: This post was written in 2008, based on me scrounging together some complementary links at the time. It’s now 2014, and accessibility is a well thought-out problem, which is generally well solved. Use the colour scheme that makes you happy. I use a black background on my Windows Phone, a dark navy in Sublime Text, a mid-grey chrome around my Office documents, and a bright white background through Outlook and my email.
As this is a suggestion which comes up quite regularly, I felt it valuable to document some of the research I have collected about the readability of light text on dark backgrounds.
The science of readability is by no means new, and some of the best research comes from advertising works in the early 80s. This information is still relevant today.
First up is this quote from a paper titled “Improving the legibility of visual display units through contrast reversal”. In present time we think of contrast reversal meaning black-on-white, but remember this paper is from 1980 when VDUs (monitors) where green-on-black. This paper formed part of the research that drove the push for this to change to the screen formats we use today.
However, most studies have shown that dark characters on a light background are superior to light characters on a dark background (when the refresh rate is fairly high). For example, Bauer and Cavonius (1980) found that participants were 26% more accurate in reading text when they read it with dark characters on a light background.
Reference: Bauer, D., & Cavonius, C., R. (1980). Improving the legibility of visual display units through contrast reversal. In E. Grandjean, E. Vigliani (Eds.), Ergonomic Aspects of Visual Display Terminals (pp. 137-142). London: Taylor & Francis
Ok, 26% improvement – but why?
People with astigmatism (aproximately 50% of the population) find it harder to read white text on black than black text on white. Part of this has to do with light levels: with a bright display (white background) the iris closes a bit more, decreasing the effect of the “deformed” lens; with a dark display (black background) the iris opens to receive more light and the deformation of the lens creates a much fuzzier focus at the eye.
Jason Harrison – Post Doctoral Fellow, Imager Lab Manager – Sensory Perception and Interaction Research Group, University of British Columbia
The “fuzzing” effect that Jason refers to is known as halation.
It might feel strange pushing your primary design goals based on the vision impaired, but when 50% of the population of have this “impairment” it’s actually closer to being the norm than an impairment.
The web is rife with research on the topic, but I think these two quotes provide a succinct justification for why light text on a dark background is a bad idea.
Hi,
I haven’t read any papers on this topic, but one thing that I know is that the reason for people to try and switch to white on black is the fact that the eyes get really tired by looking for 12+ hours at the white screen.
So, the arguments you give here are may be relevant for short term, but what those articles say about long use?
Black print on a slightly yellow background (see my blogsite) is very readable AND helps on the tired-eyes issue.
BTW: Follow-Me trucks at airports are black and yellow form aximum visibility.
Agreed with previous responses. As a developer with very bad astigmatism and keratoconus, I notice that I am only good with dark text on white background for about 4 hours before my eyes hurt.
I can code with bright colors on black screen all day without my eyes hurting.
Maybe the having only one forecolor has a detriment not noticed when multiple colors are used say with Netbeans editor?
An interesting angle. One question I have: assuming it’s true that nearly 50% of the population has astigmatism, wouldn’t many (most) of them have corrected it? I’ve seen an estimate that 25% of American adults are myopic to at least -1.00 diopters; does that mean “make the letters bigger?”
References cited in the Wikipedia article on astigmatism suggest a prevelance closer to 30%. One of those references points out that refractive errors, including astigmatism, vary significantly among children in four ethnic groups, even controlling for age and sex.
Yeah, I use light on dark as well. Although, regardless of the light on dark or dark on light, I never use full black or full white.
I’ll typically use a light gray and a very dark grey, as I find it a little easier on the eyes.
As a CAD operator, light colors on a black background is a de-facto standard. It’s better for seeing details for longer periods of time with minimal eye fatigue.
Which strikes me curious that MS has all but eliminated the ability to accomplish this in any of their software. See for yourself by setting your windows colors to make this occur by default – menus, text fields, title bars, and other items that should coordinate with your settings don’t, they want to be black on white, and therefore become the same color for both.
Thank you MS for not getting the user base.
I was under the impression that white on dark is easier on the eyes. I just was under the impression that staring into a bright source of light is tiresome.
Besides some people believe that dark background spare energy. And by the size and brightness of my LCD monitor, I don’t think that is far fetched.
It appeared logical to me that something that (supposedly) uses less power and throws less white-bluish light into your retina would be healthier.
Also, the white, paper-like background just looks sad and depressing.
But the thing about focus and the iris also makes sense, so I really dont know what to do now! I was all proud of having switched all my IDEs to sci-fi like dark backgrounds.
Light on dark is where it’s at. I just like it better.
A neat example of sci-fiesque light text on dark background is the http://www.cold-frontier.com site.
In my case, I found it much harder to focus on light text on dark background and the example you pointed it awful IMO.
Your monitor uses the same amount of energy regardless. A black background just blocks the backlighting from getting through. A CRT may be a different story.
I have recently had numerous conversations about dark versus light backgrounds. While there are several arguments in favor of light backgrounds (like those listed here), the only argument I have heard against light backgrounds is this notion of “eye strain”. I have spent a fair amount of time looking for any research that supports this argument and have not found any. If anyone is familiar with research on this topic, please post it.
The writer of the article you commented on gave you two referenced, peer reviewed examples.
I think you misunderstood his question, Paul. He’s on your side here. He was looking for evidence against LIGHT backgrounds, not against dark ones.
My Colleagues are suggesting having a black background with white text and think a white background is boring. I disagree do you? The background on this website is very nice, with the strip of gray and black at the top and bottom. Do think white is a good background color? Comment on my blog post, I would really like to see your answer, thankyou!
http://makingeduc.blogspot.com/2011/05/does-white-background-on-website-bland.html
Dark on light is a great default, but there must be other options if you want to accommodate everyone.
There are significant populations with visual conditions for which light and dark is better. I deal with an increasing number of “floaters” and find that light on dark is much easier to read. My wife had cataracts relatively young in life. Before surgery she experienced a glare problem that caused bright backgrounds to essentially extinguish dark characters. The amount of light in the room can make a big difference. A white background in an otherwise dark room can create a lot of glare, even for those not dealing with cataracts.
Black on white (or vice versa) give sub-pixel rendering systems the most flexibility. Saturated colors can aggravate chromatic aberration for people with strong corrective lenses.
Personally, I find dark gray (instead of black) at least as annoying as text that is too small, lines that are too wide, and line spacing that is too tight.
If a site has more than two paragraphs of white on black I have to copy and paste the text into a word processor to actually be able to read it.
The worst example I have ever seen is:
http://www.dpreview.com/
On top of not using white text on a dark background…
I just wrote an article with research references talking about how a clean website is more appealing to visitors. Personality type does also play a role in preference. However, the general preference is a 50% keyword density.
Andrew
In my case I get a headache by being exposed to lighter color over a longer period of time, so a white or very light background is a huge no,no in periods over 2hours. Unlike darker backgrounds.
Yes, this is true, but I prefer black text on gray background. You can use light text on dark background on tabs/headers but be careful, pastel color is good also.
On the LED/LCD screens like smart phones, I prefer white text on dark background especially in Windows phone 7 usage of tiles.
Yes, this is true, but I prefer black text on gray background. You can use light text on dark background on tabs/headers but be careful, pastel color is good also.
On the LED/LCD screens like smart phones, I prefer white text on dark background especially in Windows phone 7 usage of tiles.
carlbytes.blogspot.com
Blah blah blah blah….
Why not just give us a choice instead of all this wasted typing. It’s clear no one will ever agree. I know one thing only; I will not be using light on dark websites until they change. They make me feel ill (I get ghosting all over the page as I try to read). If these sites gave us a choice to keep everyone happy then great.
We have the technology, so let’s just do it instead of discussing it at length.
Who cares about eyestrain? Something like 50% of visitors will not read a webpage if it is light text on dark background.
Do you want people to read your webpage?
Have you ever seen a newspaper site with light text on dark background?