Content

Why You Should Never Use Pure Black for Text or Backgrounds

Did you know that pure black text can cause eye strain? A survey found that “58 percent of adults in the U.S.” have experienced eye strain from working on computers. Designers can do their part to reduce the likelihood of eye strain on their designs by paying attention to the color of black they use.

Pure Black Text & Backgrounds

Pure black text and backgrounds with white can cause discomfort for the eye when users read the text over an extended period of time, leading to eye strain.

Research found that text and background combinations with too high of a contrast can lead to eye strain. However, too low of a contrast can also cause eye strain.

White has 100% color brightness and black has 0% color brightness. Such a big contrast in color brightness leads to a disparity in the light levels users see. This causes their eyes to work harder to adapt to the brightness when they read.

pure_black-vs-dark_gray-text

An example that illustrates this concept is when we turn on a bright light in a dark room. Such a drastic change in light conditions is harsh to our eyes. But if we turn on a dim light in a dark room, our eyes adapt to the change easier because our retina isn’t overstimulated by such a sharp increase in contrast.

pure_black-dark_gray-background

Instead of black, use dark gray text on a white background so the change in brightness will not be as drastic. This prevents overstimulating the retina and allows users to be able to read for a longer period of time.

Dark gray can have different brightnesses. To find the brightness that works for your text, survey your users to see which one they most prefer.

High Contrast for Accessibility

Black isn’t bad for all users. Low vision users, who are sight impaired but not blind, tend to read text better on high contrast modes. When designing for them, you may need to use black for accessibility settings on your interface. Dark gray should still be used for normal users.

high_contrast_mode-accessibility

Balanced Contrast for Readability

High color contrast is good for readability. Too high of a color contrast, however, creates a great disparity in light levels that affect the user’s eyes when they read. A balance of contrast between the text and the background color is a good way to make your text safe for the user’s eyes.

If you’re unsure about your color contrast, you can use a color contrast checker to find an optimal range that works for you. It indicates when your color contrast is too low based on the WCAG 2.0 industry standards. However, it doesn’t indicate when your color contrast is too high. That decision is left for the designer’s careful eye to decide.

Text color isn’t limited to black and white, but it’s the most common color combination for text. Before designers use it they need to think about how it affects the user’s eyes. Designing to reduce the pain of eye strain means users can spend more time reading and enjoying the text on your interface.


Sign Up for Newsletter

Books

design-vetting-tout

Toolkits

WP-tout
FP-tout
PP-tout

Affiliates

elegant-themes

Article written by anthony

Author and founder of UX Movement. Creating a better digital world for mankind by teaching and evangelizing best practices, standards, and techniques in user experience design.

This Post Has 28 Comments

  1. Ray Reply

    I agree with this, BUT being 58 years old, I find certain low contrasts more difficult to read. Mind you, not *really* difficult, just enough to imagine what it is to be really old 🙂 That is why I find the given examples of grey #444 (you call it dark grey, but it is really mid-grey) on white, or this input while I am typing of mid-grey #787878 on light grey #FAFAFA, too much of an eyestrain for scores of people. WHY oh why is it a fad with designers to use grey on grey? Why use less contrast and make it more difficult for people to read?

    So yes, by all means do not use black, but beware of the grey sludge.

  2. René Reply

    Dear Anthony,
    Thanks for sharing your ideas.
    I think your article heads for the right direction but misses the point.
    It is due to one of the most commonly forgotten interface design principle: no one likes to look into the sun directly. In the Internet we are doing this most of the time.
    So, not the text color is the problem with black text and white background but the background color. It is the same vice versa: white text color is blurred.
    A better headline of your article could be: “Why You Should Never Use Pure White for Text or Backgrounds”.

    Best, René

  3. Tom Minnefor Reply

    Agree, BUT we’d fail our WCAG 2.0 test requirements.

  4. Michael Reply

    I agree with most of what you wrote. But one thing is clear that most designers don’t use ‘dark grey’ for text but other lighter shades of grey that most older readers cannot read. I believe that true black for text against a non-white background is still the best for displaying text.

  5. Michael Prewitt Reply

    I think the #444 gray is too light, but I think it’s the weight of the font more than just the color itself. #444 is actually somewhat dark as a block of color. Personally I wouldn’t usually go brighter than #333, at least with text set like yours.

    Worth noting is that this article itself is #333 text on an off-white background, which to me is preferable to the proposed solution.

    Some articles from the opposing perspective are:

    https://www.wired.com/2016/10/how-the-web-became-unreadable/

    http://uxmovement.com/content/why-your-gray-text-should-never-exceed-46-brightness/

    (Those articles don’t say you shouldn’t use gray type, but rather argue that many web designers are using too much gray, too light of a gray, or too little contrast.)

  6. Megan Rotkowitz Reply

    A design professor of mine in college once said, “Black isn’t a choice. Light black is a choice.” and I’ve never looked back.

  7. Joe Hirst Reply

    Couldn’t agree more! There’s definitely a time and place for 100% black. Typically I’d say reserve that for print and visual image elements. Black text is incredibly harsh on the eyes, and a black background can be just as glaring. I use 80% Key (black) in my branding along with #333 for website headings, and #666 for my screen fonts.

    Very nice little article. 🙂

  8. Mark Narusson Reply

    Great point. Black always looks cool but let’s face it, it’s too harsh on the eyes. Grey all the way!

  9. Anthony Reply

    Personally I agree with you, but in some cases (some industries) using pure black works better than gray.

  10. James Green Reply

    I really hate the way you’ve framed this argument. You give no evidence as to why pure black is bad, instead your whole argument is that high contrast is bad (which I generally agree with). I think, for a variety of reasons (power saving on OLED displays, looks better, contrasts the pure white of normal backgrounds), that pure black should be used as a background in dark modes, with the text and related elements being light grey.

  11. James Colton Vreeken Reply

    Pure black backgrounds also can save electricity/battery on oled devices like iPhone X

    • Michael Reply

      I was going to say the same. I think this is one good and valid reason to use true black #000000

  12. David E Reply

    I’d guess the topic cares more about the end user, and not the developer’s eyes. I started out as a Cobol mainframe developer. All the while, mainframe emulators default to black background, green/yellow text. the MS-DOS command prompt or linux console gives the “hackerman” feel, but was it actually straining our eyes all along? I’m glad i’m into testing / test automation nowadays and might probably try the #444 settings for the Eclipse IDE…

  13. Daniel Reply

    It’s hard to read gray text. #444 is way to light. Perhaps between #2a2a2a and #333 is more acceptable to me. Also the font text color (#787878) for the textbox for leaving comment is absolutely unreadable, as it blends completely into white background. I prefer to read a black text on light background, rather than gray text on white background.

    Also, it applies to printed text as well. I recently tried to read a book, but the text was printed in brown ink, not black (for stylish reason?) Why? I asked. It was horrible.

  14. John Spicer Reply

    My 85-year old eyes find it very difficult to read light gray type in internet items.
    I use the Chrome browser, so I frequently use the high-contrast viewing option
    to show the text in white against a blacl background.

    Furthermore, when I copy the text in a document, I change the color to black.
    So, I may be in the minority on this topic.

  15. Larry Reply

    The result of graying the text is NOT readability; it is eye strain.

    Telling the pro-gray text lobby that high contrast is better is like telling the Emperor he has no clothes. Everyone else knows it, but not the designer.

    Designers are wonderful and make using the Internet often a joy. But this graying is misguided

    Ask my ophthalmologist.

    Larry

    • Gary Reply

      Well said Larry,

      It’s not the black text that is the problem, it is the illuminated page.

      Is there a pro black-text lobby group we can join? 😉

      I’ve got my “Drain the grey-sludge!” banner ready for the march.

      Regards, Gary.

  16. CK Reply

    I am not trying to be unkind, but I was a journalist for years, and this is just pure b/s. Gray is actually much harder to read. Always has been. Newspapers would have been gray if it sold more papers.

    That survey has no direct connection to black v. gray, so not related really. That second reference really has nothing to do with it either–totally unrelated. None of the research is really related at all, and this is what happens when people try to make something up that doesn’t fit the research. It is just has no credibility.

    It is better to have the research actually aligned to the conclusions, and this isn’t.

  17. TP Reply

    This will all change when millennials become 50+ years old and realize how hard it is to try to read grey.

  18. Tom Reply

    I’m a retired website designer and I bought a new microwave oven yesterday. The input touch pad has a relatively dark gray type on a black background which is nearly impossible to read. This started me wondering when the whole gray on black trend started and why. It’s not just an issue on the web, it’s everywhere from microwaves to keypads to websites. The basic point of type is for communication and I think graphic and industrial designers have lost their way. My 76 year old eyes aren’t that bad and I curse those websites with reverse type of any color or contrast.

  19. Diana LaRpse Reply

    As others have pointed out, overly low contrast is a much greater problem. Sites with too high of a contrast are about as rare as middle-aged women who think they’re too skinny.

  20. Rudy Rucker Reply

    I”ll chime in with the other oldsters. If I pick up a book and the font is a feeble gray (like on this webpage !) instead of a robust black, I simply don’t read the book. I think designers make a foolish and unkind mistake if they dial down the contrast . My specualtion is that such designers are not in fact serious readers at all, and not in the habit of spending hours on books.

  21. Rohan Reply

    I don’t think black itself is the problem, rather having too much contrast with it.

    Remember MS-DOS? What colour-scheme did it default to when you booted the machine? Grey on black.

    Open a command prompt in Windows, and what colour-scheme do you see? Yep. Same grey-on-black as on DOS.

    Hell, my shiny new Linux Mint distro has an option in the Terminal program for grey on black.

    Seems #000000 and #AAAAAA works pretty well if it’s maintained a legacy for over 35 years.

    Also, just because making the contrast too high can result in a lot of glare doesn’t mean you should make it really low either. Too low and it’s hard to read. Find a balance. The engineers at IBM and Microsoft in the early 1980s did, so you can, too.

  22. Raquel Schnitzer Reply

    I heard that if I become 40 years old I will wonder how hard it is to read dark gray on a black background!

  23. Anton Reply

    Even this page about contrast is horrible! The text I’m typing is way too light,, as are the date info attached to articles and comments. Basically,, the entire page is lacking sufficient contrast.

  24. MrDangem Reply

    As an aspiring graphic artist I really like most of the posts here I learn so many things. I also encounter this kind of problem before. If only I discovered this site sooner I might get positive feedback from that client.

  25. Mark Marx Reply

    I’m increasingly annoyed by light text on webpages, especially when the articles are long, and I’m trying to read them on my phone.

Leave a Reply

Your email address will not be published. Required fields are marked *