Why light text on dark background is a bad idea
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?
vvvlad
October 14, 2008 at 08:30
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.
Ole Phat Stu
October 15, 2008 at 03:54
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?
Michael F
October 16, 2008 at 02:03
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.
Dave Ferguson
October 16, 2008 at 05:25
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.
Alex
October 16, 2008 at 05:44
[...] were hard to read. Apparently not being able to read light text on a dark background is due do to astigmatism. This was one drawback of bad eyes I have never heard of. Since all four contestants had the [...]
And the winner is « Bajook's Blog
October 18, 2009 at 01:33
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.
Vince
December 11, 2009 at 09:21
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.
rolfen
August 1, 2010 at 00:16
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.
Mitch
July 19, 2011 at 07:38
In my case, I found it much harder to focus on light text on dark background and the example you pointed it awful IMO.
Gowtham
March 13, 2012 at 13:54
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.
Paul
December 10, 2011 at 07:46
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.
presentationfacts
September 17, 2010 at 02:10
The writer of the article you commented on gave you two referenced, peer reviewed examples.
Paul
December 10, 2011 at 07:48
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.
ChrisP
December 12, 2011 at 05:03
[...] a site using dark backgrounds and light text exclusively. Some of the reasons for this are laid out here, but it comes down to some basics. A big one is that a very large portion of the population suffers [...]
Web Design Guidelines for your VO Site – Part One – The Voice of Cyclometh
April 4, 2011 at 16:31
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
Tim Chammal
May 23, 2011 at 19:35
[...] the page that are not the main content. Images often look great on a black or dark background, but light text on a dark background is hard to read. If you want to use two contrasting colors, you might want to test the colors with this tool: [...]
Why Color Theory Is Your Friend | Suess's Pieces
July 15, 2011 at 22:01
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.
Adrian
July 26, 2011 at 06:48
[...] Too Much White Font on Black Background: Numerous studies show that white text on a black background hurts readability. This can hurt customer readability by as [...]
20 Things About Your Website That Piss People Off | No B.S. Automotive Marketing Blog
August 15, 2011 at 17:02
[...] like this or behave like this (fact), it’s ugly (opinion), it’s hard to read (fact: white text on a black background is a bad idea)…. I could go on, but it’s too painful and frankly I feel bad. I’ve pumped out my [...]
Mitch's Blog » Blog Archive » When marketing designs the UI
November 29, 2011 at 14:05
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/
Paul
December 10, 2011 at 07:50
[...] Why light text on dark background is bad idea [...]
[planning] product list panel of groupon: the key to getting the most from choice is to be choosy about choosing #3 « Alistasha's Workshop
March 12, 2012 at 01:07
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
Andrew
March 15, 2012 at 09:20
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.
skn
March 31, 2012 at 12:53
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
May 2, 2012 at 17:15
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
Carl Bytes (@carlbytes)
May 2, 2012 at 17:16
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.
Paul
May 2, 2012 at 21:40
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?
2face
July 6, 2012 at 00:26
[...] can work and be more soothing according to some, but there are some cautions. Read more about this here and [...]
The top 10 most common typography mistakes - WordPress Tribe
November 19, 2012 at 15:43
[...] Why light text on dark background is a bad idea [...]
Blog Design: How to Maximise the Readability of Your Blog
February 12, 2013 at 04:02
[...] is the rule of thumb: light text on dark background is a BAD idea. Studies have shown that people are “26% more accurate in reading text when they read it with dark [...]
Web Design 101: Font and Typography » Doteasy’s Official Blog: The Latest News On The Web Hosting Industry
May 4, 2013 at 03:50