When to Use White Text on a Dark Background

by 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.

When to Use White Text on a Dark Background

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.

When to Use White Text on a Dark Background

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.

When to Use White Text on a Dark Background

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.


When to Use White Text on a Dark Background When to Use White Text on a Dark Background

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

54 Responses to “When to Use White Text on a Dark Background”

  1. John Beckett

    Apr 28th, 2011

    @Anthony: I don’t follow your reasoning where you stated that:

    “A bet­ter choice for dis­play­ing para­graph text is black text on a light back­ground. This is because black is a color that doesn’t reflect light in any part of the vis­i­ble spec­trum. It’s expe­ri­enced when no vis­i­ble 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.

  2. 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.

      • meh

        Sep 16th, 2013

        “My focus is READABILITY, not how much light goes into your eye.”

        Well, speaking for those of us with overactive photoreceptors, I can’t read when my eyes hurt because of staring at bright, white websites all the time.

        And screw people with astigmatism. At least my mutation is an advantage during blackouts.

  3. 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.

  4. 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.

  5. 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 ;)

  6. 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!

  7. 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.

  8. 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. ;)

  9. 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.

  10. 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.

  11. 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

  12. 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.

  13. 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.

  14. 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.

  15. 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.

  16. 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.

  17. 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.

  18. 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.

  19. 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… :-)

  20. 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.

  21. Aaron Johnson

    May 20th, 2013

    I use light text on dark background on my blog. So I can save energy. Unlike dark text on light background, it’s easier to read. I recommended this reading method, or writing method because it’s easy to read, and it won’t effect your vision.

  22. Alan Shih

    May 22nd, 2013

    I still think White on Black is more readable. The only reason I can seeing Black on white is when there is a large amount of glare. With a white background, the amount of glare is less apparent, but in general, I prefer white on black as the words seem sharper to sort of stick out of the background rather than just the absence of light. I think the human eyes naturally pick up on brighter colors than dark.

  23. isomorphismes

    Sep 9th, 2013

    White light from your screen isn’t reflected, it’s projected.

    Also the light from one character, either on paper or on the screen, doesn’t touch the light coming from another.

  24. P.

    Sep 15th, 2013

    I’ve been using computers since 1988, using the internet since 1993.

    Websites text/fonts are getting extremely too light. No matter how I adjust the monitor and Windows display settings, it’s lousy. I have to choose within the browsers to display system colors in order to read or I just leave the site. With or without my glasses, it’s lousy. I can see without my glasses. I don’t have legally blind lenses and I’m not elderly.

    The text is like, if they were talking vocally, they would be whispering so softly that you have to tell them “SPEAK LOUDER PLEASE!”

    I wonder is the eyeglass industry behind this, so people have to strain their eyes in turn needing to buy glasses.

    I read books I don’t find the text getting lighter & lighter with newer books like websites are.

  25. Adobe Wan Kenobi

    Sep 30th, 2013

    The human eye has 2 kinds of receptors, rods and cones. Rods determine luminance (brightness) and cones determine chrominance (color). The eye can sense more fine shades in the middle of the visible light spectrum, right at green, which is why old computer monitors and new night vision goggles use green as their main display color.

    High contrast is required for easy readability, and you should always convert your design to grayscale to see if it is still readable.

    If you’ve ever used bright red (#FF0000) text on a bright blue (#0000FF) background, you’re an idiot. Convert it to grayscale and you will notice the text completely disappears.

    This lack of contrast is why you get a headache when viewing such a horrid combination. The brain is trying to use cones vs rods to determine edges, and one says there’s an edge while the other says there isn’t.

    Black on white, or white on black work well, although white on blue is better.

    Microsoft spent a bunch of money to determine the most readable combination of colors, and it turned out to be white text on a blue background. That’s why it’s the “blue screen of death” instead of the “orange screen of death”.

  26. kayla

    Oct 2nd, 2013

    this has nothing to do w/ the website info but, thx for having this out on the internets because for school I had to do a bibliography and this is almost exactly what I was looking for! #reallyHAPPY

  27. Tim

    Oct 11th, 2013

    I can’t read website with white text on black backgrounds – my vision goes haywire – I have to do a select all and usually when it does that – it reverses the colors when highlighted. It is still a pain though because there are black lines highlighted text.

  28. Omar

    Oct 25th, 2013

    The American Federation of the Blind says white text on a dark background is easier to make out for those with low vision. Why would that not be true for the rest of us?

    For me, I enjoy reading white text on a black background because it allows my eyes a chance to rest. Computer monitors do not reflect light as a general rule, and when light is reflected (like on glass MacBooks), it’s not what you’re trying to read.

    I appreciate articles like this that try to elevate the user experience, but it’s based on a very faulty premise.

  29. dr. christopher landauer

    Oct 31st, 2013

    i am reading this in reverse video, which makes it quite clear that white text on a black background (the left-hand option in the first two display boxes) is far easier (for me) to read in a computer monitor (not the same with paper or e-ink, since that is all by reflected light)

    i suspect from the comments that different people have very different physiological effects and psychological responses to this issue (which is why i argue for letting me make the choice, not the web site), so that any answer or approach that says that (any particular) one way is best is simply wrong

  30. Teresa

    Nov 10th, 2013

    I am curious if this goes for print as well as web. I’m designing an ad for a playbill which will be read by older people in a poorly lit room. Any ideas?

  31. Garrett Gitchell

    Nov 19th, 2013

    White backgrounds always look crisp and clean.

    Why is it that reading through all the comments here has given me a headache? (It’s the white not the comments).

    Grey on black is soothing while white backgrounds quickly feel like a bright light turned on in the dark (confusing and disorienting).

    I have seen studies that show increased comprehension for yellow on black (which we probably all agree is just bumble bee scary).

    Preference rules. Even if preferences can be exact opposites.

    Thankfully we have CSS.

  32. Billy Etheridge

    Nov 29th, 2013

    White text on a black background hurt eyes, period. But please, do not take my word for it, ask any optometrist. If you’re in a goth metal band and you want a dark master of the world website, great. If you’re trying to convey a message or subject matter that involves detailed and complete comprehension, grow up. I had to stop reading your view point at the end of “Reading vs Scanning”. Scanning literature is the very reason a double digit percentage of college students cannot read at graduation. End of story…

  33. Michael

    Dec 4th, 2013

    When? Never.

  34. James

    Jan 8th, 2014

    Billy, stop being a troll. It has been verified numerous times that light text on dark background causes less eye strain. My optometrist actually recommended that I use darker backgrounds during my long hours of programming for that very reason.

  35. Stacy

    Jan 12th, 2014

    I’ve been a computer user for 50 (!) years and remember when all we had was black type on white background. I personally think the current crop of web designers are in an endless (mindless?) race to outdo each other in creating “glizzy” type fonts, and then blithely printing light letterings with small fonts on dark backgrounds to the detriment of us poor readers. We need to convey our messages without creating artificial subliminal distractions that slow readability, i.e. the speed of reaction and comprehension.
    “To read or to scan, that is the question!”
    P.S. Try reading a book printed all in white lettering on black background and assess your attention span and time to completion.

  36. Stacey

    Mar 12th, 2014

    What about white on dark brown? I find this comment section hard on my eyes but I like the white on dk brown.

  37. Tim

    Apr 21st, 2014

    I have to use plugins to change black backgrounds to white and white text to black text. Otherwise, it messes with my eyes and causes some kind of blurry vision.

    I think it is because of astigmatism.
    http://blog.tatham.oddie.com.au/2008/10/13/why-light-text-on-dark-background-is-a-bad-idea/

  38. Micycle

    Apr 25th, 2014

    I vote for light text in dark background.
    I agree with the reasoning of some in here that it is easier to spot something light in the dark and by so i guess it is effortless for the eyes too. Additionally, too much light emitted from a screen, it overwhelms sight. But i would like to mention some other ideas;
    Printing is more efficient with dark text in white background, because of less toner/ink usage. So they do it like this since Ghutenburg… On the other hand light emitting sources like monitors, work better with dark backgrounds, mainly for 2 reasons. 1)You usually need less energy to transmit a dark screen (excluding older lcds where there wasn’t any deference) and 2) light screens could decay/burn pixels mostly on old crt monitors, but to tft’s also (at least leaving ghosts). I believe that the main reason for using dark text on light backgrounds at the computer industry, is for compatibility with…printing. And since we read books with white paper, we should do the same with computers-they say. Of course we could convert a text to fit printing needs, but that would need more expert users. And that would be a problem, so they prefer black text on whitish background. I think things should be deferent.

  39. Tony

    May 1st, 2014

    All these comments make sense. They’re simply logical. But what I cannot understand nor fathom is why in blazes would any writer use light grey (or very light blue) on a WHITE background? What’s with the GREY ON WHITE that you see on so many sites? Yahoo is especially guilty of this ridiculousness. Can anyone explain why it’s done?

  40. mpet

    Sep 10th, 2014

    I have the opposite problem. On screens, white on black looks sharper to me, black on white is blurry for me and causes pain and fatigue in my eyes.

    I use plugins to convert pages to white on black, I use dark themes in mobile apps if available and I prefer sunglasses when reading printed paper in even light sunlight.

    And light grey on white? That is just pure evil.

  41. Arlen

    Oct 24th, 2014

    This is an argument for the opposite of what the author intends. It is evidence IN FAVOR of black or blackish backgrounds.

    “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”

    IMHO, the blocks of white on black above stand out better and are easier for me to jump in and read than the black on white.

    Also, as someone with light irises who gets weary eyes by constantly gazing into bright, white light (Duh!) I strongly appreciate the sentiments for using off-white, like the background on this page, when using dark text

Leave a Comment