When to Use White Text on a Dark Background
by anthony on 04/28/11 at 11:11 am
Many websites use black text on a light background to display their content because it’s easy to read. However, using white text on a dark background also has its advantages. Knowing when to use one over the other will allow you to safely apply these techniques to your design without hurting user readability.
Reading vs. Scanning
When it comes to text on websites, users either read or scan. Reading involves focusing on words for a thorough comprehension of the subject. Scanning involves skimming the words for a broader comprehension of the subject. When you should use white text on a dark background depends on whether users are scanning or reading text.
Paragraph Text
The kind of text that users read is paragraph text. You should avoid using white text on a dark background when displaying paragraph text to make it easier from them to read. Forcing users to fixate on the white text for a long time can strain the user’s eyes. This is because white stimulates all three types of color sensitive visual receptors in the human eye in nearly equal amounts [source]. This makes reading white paragraph text on dark backgrounds stressful on the user’s eyes.
White also reflects all wavelengths of light. Because the words and letters in paragraph text are compact and close together, when white text reflects light, the reflected light scatters and runs into neighboring words and letters. This makes the shape of the words and letters harder to perceive, which affects the user’s readability. Compare that with black text, where the black absorbs the light around each word and letter, making them easy to distinguish.
That’s why a better choice for displaying paragraph text is black text on a light background with a tint of gray. With a non-white background, less light reflects behind the words, making it easier on the eyes. The black text works better because black is also a color that doesn’t reflect light in any part of the visible spectrum [source]. Therefore, fixating on black text while reading won’t put as much stress on the user’s eyes because it absorbs the light that hits each word.
However, if your site uses a dark background, display your paragraph text in gray instead. This won’t put as much stress on the user’s eyes because gray text isn’t as bright as white text. It’ll reflect less light, making it easier to read. Keep in mind that if you’re reading text in a dark room, where no light is present, then white text on a black background isn’t as hard to read. This is because no light is reflecting off it in a dark room.
Headings, Titles and Labels
There is a time when white text on a dark background works well. This is when users are scanning text. Users typically scan headings, titles and labels. Using white text on a dark background for these types of text is an effective way to highlight them to get the user’s attention. This is because white reflects all the colors of the visible light spectrum into the eyes [source]. This makes the text bright and distinct. You won’t have to worry about putting stress on the user’s eyes because scanning these types of text doesn’t take long visual fixations. All it takes is a quick sweep of the eyes to scan a heading, title or label.
Using white text on dark backgrounds as a highlighting tool is a smart way to call out important elements that users often scan. Applying this dark and light colors correctly on your website will make your text easy to read, so that user’s can enjoy your content without getting an eye ache.
John Beckett
Apr 28th, 2011
@Anthony: I don’t follow your reasoning where you stated that:
“A better choice for displaying paragraph text is black text on a light background. This is because black is a color that doesn’t reflect light in any part of the visible spectrum. It’s experienced when no visible light reaches the eye [source].”
In the case above, there is a lot more white on the page (i.e. background colour) causing a lot more light to reach the eye [source] than it would be with a dark background with light text.
Additionally, many programmers who have to spend all day looking at text on a screen opt for light text on a dark background because it gives lower eye strain.
anthony
Apr 28th, 2011
That’s a common misconception. I have updated the article so that it explains the reasoning clearer. Let me know if you have any questions.
azurelunatic
Apr 28th, 2011
I am highly dubious of claims about reflected light where it is implied that reflected vs. absorbed light make up the bulk of the light experience in the context of a computer monitor, rather than e-ink.
Paper and e-ink use reflected light for white. Lit computer monitors convey white with transmitted light from the screen.
anthony
May 5th, 2011
Computer monitors do emit light, but they also reflect it when it’s in a lit room. Just because it’s a computer monitor does not mean the laws of nature do not apply to it.
Schell
Oct 14th, 2011
Stating that text readability is affected by reflection of light off a computer monitor can only hurt your argument. When a pixel is white, it is completely translucent, letting the bright, white back-lighting from the monitor shine through. When a pixel is black it effectively blocks that back-lighting, appearing black. The photons emitted from a white pixel will not reflect a photon from the lights in the room back into a user’s eye. The black pixels WILL reflect light emitted in the room. Most of the reflection from your monitor comes from the outer layer of material (glass, plastic, etc). In this case only the angle of incidence and the index of refraction of the material really matter – that kind of reflection is called glare, which hurts all readability regardless of color scheme. I think it really does come down to contrast and how long you plan to stare at the text in question, as well as the lighting in the room.
Shaun
Feb 24th, 2012
A light source cannot reflect light. The white/bright pixels on your monitor do not reflect light. As Schell mentions, you will get reflected light on the screen — in other words, glare — but everything you’ve stated about white lettering reflecting and scattering light applies only to non-black text, ie. text that relies on the reflection of light to be visible.
Chris B
Dec 16th, 2011
The original post is more or less correct but for the wrong reasons.
Black text on white is the most readable scheme to most humans. The reason for this is that corneal aberrations are minimized when the pupil is at its smallest. The opposite occurs when, for example, you are dilated at the optometrists’ office (acuity goes down).
Black text on white is transmitting the most light to the eye and will look sharpest, especially for people with under-corrected vision.
However, in terms of eye strain, the best is a LOW contrast scheme. White text on black is the worst for eye strain (speaking grayscale). Black text on white is better but still not the best. Dark gray text on light gray would cause the least strain.
Dan Mouyard
Apr 28th, 2011
I have to disagree that it’s a common misconception. John Beckett was correct that having a light background causes more light to reach the eye, which causes eye strain. It can even cause pain for users with Photophobia.
I understand your reasoning for why dark text on a light background might be clearer, but it still causes more eye strain.
anthony
Apr 29th, 2011
Yes, you are right that a light background brings more light to the eyes. However, that’s not the point I was making. My focus is READABILITY, not how much light goes into your eye.
The fact is when you’re reading white text on a dark background in a WELL-LIT ROOM, as opposed to a dark room, the shape of the words and letters won’t come out as clear as black text on a light background for the reasons mentioned in the article.
Is a pure, white background the ideal background for reading paragraph text? Probably not for the reasons you mentioned. But a LIGHT background with a tint of grayness in it? Yes.
drew
Apr 28th, 2011
You have it backwards.
First of all, light off a monitor is not based upon reflection. It’s based upon transmission.
Secondly, most vision is based upon contrast, which is the DIFFERENCE between two areas. Grey on black (or white for that matter) is harder to discern. This is why eye examinations are conducted with black on white, for the contrast.
And Third, aside from color-confusion/blindness issues, the actual color of text/background does not matter. What does matter is that it is a color that would register sufficiently differently to the eyes (generally referred to as a contrasting color). Color, in this case, referring to hue, saturation, and luminosity.
That being said, even if we hold the supporting statements to your theory to be true, reason and science tell us that the bright thing in the middle of the dark is going to be easier to discern than the dark thing in the middle of the bright, if for no other reason than light spreads, and dark, being the lack of light, does not.
anthony
Apr 29th, 2011
You are right that monitors EMIT light. But when you’re viewing your monitor in a well-lit room, your screen also reflects light. That’s why when you read white text on a black background in a dark room, it’s a lot easier to read than in a well-lit room. So, when developers work in dark or dimly lit rooms, which they often do, the text on their screens are easy on the eyes to them.
How can you say color doesn’t matter, but then say contrast, hue, saturation and brightness matter? These are all apart of color. Different colors have different degrees and values of contrast, hue, etc. So color does, in fact, does matter.
You’re looking at this article all wrong. This article is not talking about how many people can point out the bright thing in a dark room vs. a dark thing in a light room. That’s a totally different context. This article is specifically talking about the READABILITY of text.
Remco Dekker
Apr 29th, 2011
How about White on Black on mobile phones? In my experience it can be nicer. Like when it’s dark, it’s much calmer for your eyes because you don’t have the light of the bright screen in your face.
Kenny Brijs
Apr 29th, 2011
That’s some advice to keep in mind
I was amazed that grey text on black background is actually easier to read than white text on black bg, but it’s true
Good to know, and thx for the article
Stuart Lawson
Apr 29th, 2011
Thanks again for this great article, over the 5000+ designs that I have created, having solid white on black is painful compared to having the text slightly gray on black (even if it is just a little bit less white, it helps.) Keep up the great articles!
business
Apr 29th, 2011
It all depends on your audience..There are a few options you can use when deciding what colours to use when designing your games menus and screens Either dark text on a light background light text on a light background light text on a dark background or dark text on a dark background..Black text on a White background.
Black text on a white background is the most common way that text either printed or on web pages is presented. This dates back to the times before computers and type writers when the majority of printed text was found in books and in newspapers.
An example of a game that uses a dark coloured text on a light background is Assassins Creed shown below ..The amount of light reflected from a white background can actually cause tiredness or slight pain in some peoples eyes but because presenting information in this way is how many are used to the best way to make sure that the viewer is most comfortable when reading your piece of information is by using an off-white shade.
James Dunne
Apr 30th, 2011
In contrast to many comments here, I have to agree with you simply because the grey text on black is far easier to read than full white text on black. This, I believe, is the core idea regardless of the science behind it and anyone arguing over the science is pretty much arguing semantics at the end of it all.
It’s not actually an argument against light text on a dark background but rather an argument against true white on dark backgrounds. White is light but light doesn’t necessarily mean white – it’s simple logic.
Also, if anyone’s noticed, programmers are not exactly known for their astonishing eyesight. I’ve tried working with a similar screen style but it just hurt too much and slowed me down massively.
Finally, I also believe that dark text on a white background isn’t exactly ideal either and that it’s often beneficial to reduce the brightness of the background.
azurelunatic
May 2nd, 2011
I get an increase in readability from a light grey background rather than a white one as well.
After having looked at the alternatives, my preferred color schemes are always going to involve light grey instead of white, and a dark grey instead of black. It’s amazing how much difference it makes.
But when the science cited is wrong, I’m still going to quibble.
Charles
May 1st, 2011
Another example of this is in the website for Two Black Sheep Coffee.
Black background, Grey text, White (or red) highlights.
It is easy on eyes, to read.
Matt
May 3rd, 2011
Do I see it right that you placed the light-on-black in BOLD type and the dark-on-light type in NORMAL?
If so – how can you compare both?
anthony
May 3rd, 2011
They are both in normal type. Read the article and you will know why the light on black looks more bold. Everything in the article is absolutely correct.
andy
May 4th, 2011
Hi,
An interesting read, but I’m afraid this article hasn’t taken in to account a critical component; there is a massive difference between how we perceive, and what affects, transmissive and reflective light.
As azurelunatic has already mentioned, reflective light, which is discussed within this article, is how we perceive printed words and colours, such as text in a book or in a newspaper, and is not relevant when discussing how to use colour displayed on a computer monitor.
Computer monitors are based almost entirely on transmissive light, which is not the same as reflective light, and the issues that affect how we should approach type for online are therefore not covered at all within this article. Transmissive light comes with its own issues and considerations.
e-ink is the exception to this rule, which uses technology to create text that is viewed through reflective light.
I would suggest further research is required here if you wish to include type displayed on a computer monitor. As it stands, this is a well written article when discussing printed text only.
Andy
Panama foundation
May 27th, 2011
To me this is an accessibility issue the same way many people with impaired.vision prefer light-on-dark text and may have problems similar to or worse.than mine when reading dark-on-light text. I still struggle with high-contrast light-on-dark designs.So if you want to use light text on a dark background please provide an.alternate stylesheet that turns the whole design not just the content area .back to dark on light. You should also consider what Mark Boulton has to say.in Five simple steps to better typography When reversing colour out eg white text on black make sure you increase.the leading tracking and decrease your font-weight.
Biju Neyyan
Jul 12th, 2011
Hi Anthony, thank you for such nice ‘observations’ regarding white-on-black, black-on-white text.
The results are right there, making me realize that one set is super easy to read while the other set is not….
but still, i think you MUST get a little more into physics and try to understand how stuff works.
But at the same time, let me point out it again that your ‘observations’ are really valid!… thank you.
peteski
Oct 26th, 2011
This is a confused and poorly researched article. Quite apart from the confusion surrounding transmitted vs reflected light, the author makes claims and attempts to back them up with ill-sourced references. Example: yes white light is a mixture of all visible light frequencies and may stimulate all light receptors in the human eye equally, but why does this make it more stressful on the eye? No source is provided to substantiate this claim.
The optical effect of light scattering is then provided as a reason for the light from white on dark text being harder to read than the reverse. Really? Explain this and provide some evidence please.
If there is evidence and research from the world of physics or biology to substantiate the thrust of this article, it could make an interesting and useful piece, instead of this jumble of half-baked pseudo science.
BLU:72 Creative
Feb 6th, 2012
For me, lots of white bodycopy on a black background is a no no, they often do it on the Sky 1 site and it feels like its vibrating, it gives me headache. Then when I go back to regular site, it takes ages for my eyes to readjust. A light grey text on the same background and I don’t have the same problem.
PeaceByJesus
Apr 5th, 2012
I find light (not white, or florescent green) text on a dark background less stressful to read, and i also like text in a variety of colors (as my site has them). But after reading this i am going to experiment with a off black background. And i thank God for eyes to see, and for color.
Kelly
Jul 10th, 2012
To put it simply, white text on a black background hurts my eyes and keeps me from being able to read anything else clearly and without a headache for at least 20 minutes. I see ghost or phantom text when I try to read another lighter page. I like gray on black much better.
Rosey Sharman
Sep 14th, 2012
I have to disagree.
White on a darker background (e.g. dark blue) is much easier for people esp dyslexics to read.
Since the advent of white boards and the increased use of work sheets and the demise of chalk boards in schools diagnosis of dyslexia has increased significantly and has a much wider impact on all subjects.
Previously the only thing dyslexics had to cope with was the reading of books (black on white) and now the problem with reading black on white affects all their classes!
Ben
Sep 22nd, 2012
Chalk boards were and still are miserable to read from because the contrast was terrible. I saw very few that were washed regularly, so it as usually white on murky gray. That said, white on gray or white on blue etc are not the same as white on black.
I’d say the diagnosis of dyslexia going up has a lot more to do with improved understanding and methods for diagnosing dyslexia over the last 20 years than the absence of chalkboards.
The whole range of conditions which can cause someone to have difficulty reading is generally better understood and in most cases more commonly diagnosed today than it was 20 years ago.
Emailis
Mar 7th, 2013
Enjoyed the educated posts, but would like to hear more about white vs black background on smartphone design. I am trying to make the decision right now as I type this, and finding it a difficult decision. Thanks All…
The Ceej
Mar 10th, 2013
When to use white text on a dark background? I don’t even need to read the article.
The answer is easy: When you’re not maliciously trying to cause headaches and blindness in people.
It’s violent to make your background white.