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 on White Backgrounds

Pure black text on white backgrounds can cause eye strain when users read the text over an extended period. White has 100% color brightness, and black has 0% color brightness. Such a disparity in color brightness creates intense light levels that overstimulate the eyes when reading text. This causes their eyes to work harder to adapt to the brightness.

A research study has found that “black text on a white background overstimulates the OFF ganglion cells while white text on black background overstimulates the ON ganglion cells.” The study concludes that “the striking effects of contrast polarity suggest that it may not be advisable to read black text on white background.”

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 White Text on Black Backgrounds

It would also help to avoid pure white text on a black background. This combination has been known to cause halation in users with astigmatism, and visual distortions in users with contrast sensitivity. 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 more extended period.

pure_black-dark_gray-background

High Contrast for Accessibility

Pure black isn’t bad for all users. Low vision users, who are sight impaired but not blind, tend to read text better with black text or white text on a black background. When designing for them, you may need to use black for the accessibility settings on your interface. Dark gray should still be used for normal-sighted users to prevent eye strain.

Balanced Contrast for Readability

High color contrast is useful for readability. Too high of color contrast, however, creates a significant 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 an effective 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 shows you 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 content on your interface.


Toolkits

Affiliates

elegant wordpress themes

Article written by anthony

Author and founder of UX Movement. Creating a more humane world for users by teaching others how to practice UX the right way through principled design techniques.

This Post Has 46 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.

    • paul simin Reply

      light grey fonts advocated by morons,, these are people who believe they know better but do not have a clue !

  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.

    • Mario Reply

      Like Apple, The Final Cut page has black background but either is not #000000. Few years ago, the whole page of the mac pro has also black background. Now on 2020 not too much, mostly the navbar and they combine some sections black background and aside section white background.

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

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

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

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

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

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

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

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

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

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

  25. Bob Tron Reply

    It really is nothing more than a misguided fad. As some one else said, even typing a reply is actually straininng my eyes as the font is too low contrast. What the hell happened?? Even big name companies have gotten in on this idiotic practice. jesus Christ.sight

  26. DJ Langehennig Reply

    You’re an idiot. May you live long enough to realize this. Have you ever heard the phase “gray and grey”. It carries no meaning, but “Black and White” does. I can barely read what I’m typing because some fool has lightened the font to the point that it’s almost invisible. I want my comments clear and understandable not shrinking away and avoidable. And at the same time I want to be seen and comprehended by everyone that cares to read this. This weak gray-scale fad is the modern day equivalent of the sneaky fine print that scammer worms used in the past. The less you want to be understood the lighter the type.

  27. Larry Szczygiel Reply

    Who died and put the GRAY dictator god in charge and why can’t the user have the option to change it?
    I support all the Anti GRAY text comments. I typed my comments in MS Word 2007 so I can see what I am typing then pasted them here. You can say all the good things you want about the benefits of GRAY text but if all you are doing is making a bunch of people mad then shame on you.
    Who’s in charge of this GRAY text movement anyway and why won’t they step up and say or do something?
    The Gray text is very irritating. I’ve had 11 eye surgeries and I just want to make things easy for me to read. Black text was very comfortable for me to read, GRAY is NOT.
    The Surgeon General says smoking is bad for your health. But at least one has the option to smoke, I don’t smoke.
    Drinking alcoholic beverages can be bad for you health but at least we have the option to drink them. I do drink.
    I don’t need some goodie two shoes forcing something down my throat just because they think it is better for me.
    Someone has got to have the power to give us the option to set our fonts for our own eye comfort. Everyone is different.
    Hoping for the Option.

    Larry

    • Paul Reply

      Larry … to answer your question, “Who’s in charge of this GRAY text movement anyway and why won’t they step up and say or do something?”
      Personally, I think it’s a conspiracy by the Millenials to make the rest of us go blind!
      I also totally support your “Black text was very comfortable for me to read, GRAY is NOT.” statement.

  28. Jules Reply

    Please stop this eye-straining grey fad.

    So far I have yet to suffer eye-strain from “too black”.
    (Maybe that’s because I’ve reduced the brightness of my screen…..)

    I’ve lost count of the times I’ve searched for a way to over-ride grey text ……
    …. like in this article and comments input.

    If only Browsers had a toggle for Black Text …

  29. Peter Reply

    In your article, you have a section titled “Pure White Text on Black Backgrounds”.

    In the text, you talk about using grey text on black background as being preferable over white text on black background, *but* the sample you show is not what the text describes. In the sample, you contrast white on black background with white on grey background.

  30. Bren Murphy Reply

    It’s true. There’s nothing worse than flat black all the time.
    Clients really notice the difference and the user experience is markedly superior.
    Remember #444444 always my friends!
    Cheers
    Bren

    • Jules Reply

      Bren,
      Please post a link to a site with text that is “too black”.
      Seriously, I’ve yet to see one.
      Thanks

      p.s. If the emphasis was on “all the time”, then I would agree.
      Too many sites limit their colour palette which is poor for navigation and boring to read.

      As for “User experience”, there are loads of forums with Users complaining about unreadable grey being foisted on them – worse when a previous version was OK.

      Only yesterday I was on a finance site – with links to “new pages”.
      The “old” page – a just-about-readable mid-grey.
      The new page was a mixture of barely and unreadable pale greys.
      What are these Designers seeing ???

      • Paul Reply

        I completely agree with you Julus!! As a 56 year-old, the grey text just keeps getting lighter and lighter. I personally prefer absolute black (#000000) for text, but I know there are those in the UX world who say it’s too harsh. While using something less than black (#444444) is acceptable, any lighter than that and the contrast of the text on the page starts to become problematic. Unfortunately, it’s just getting worse and worse and the grey text just keeps getting lighter and lighter. I have now gotten to the point where I simply close any site that I can’t easily read.

        Something else coming into play here … UX Designers are often the people in charge of picking out “standard” colors that employees / associates must use for any and all communications. This causes some serious problems … especially for those of us in the training design & delivery world. Try being forced to use grey text in a PowerPoint training deck where the participants run the age gambit and some of the participants have to view the session from the back of a large room.

        I recently discovered what I believe to be THE worst example of unreadable grey text on a website … and it’s from a Marketing company!!!!!!! If you’d like to take a peak, access the following Dropbox folder to view two screen captures I took from the site:
        https://www.dropbox.com/sh/nft5whvub3d4z7q/AADs4QL5iVOx4NcmeqtShO1xa?dl=0

  31. Hugh G Wetmore Reply

    With so much anti-gray sentiment, why doesn’t someone listen? I am 82y old and struggle to read many things on my screen. Surely by now someone must have invented a way for a laptop user to select the colour/contrast of the type on the screen. I’ve just printed two pages of gray type and neither my wife or i can read them – the eystrain is painful.

    I concur with Michael above
    May 9, 2018 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.

  32. Jeff Reply

    I would rather have eye strain, than be blind. This low contrast movement is rendering me blind. Being blind creates an enormous amount of strain.

  33. Be Reply

    I wonder what you will say on this subject when you are 75 years old & have to use a magnifying glass to read an article several times just because it is GRAY!!

  34. a.k. segan Reply

    your contention that black, high contrast font causes eye strain and that gray font does not mocks optometry, optical dispensing and is not backed by any optometrists worldwide. Optometrists only project alpha-numerics in black, high-contrast and bold type during patient eye exams. There are NO prescriptions for corrective eyewear for light-value, extremely light-value, low-contrast and or nearly zero contrast type that is all the rage not only online, but which has morphed to all manner of hardcopy publication graphic design.

    Any and all font-type and text that is non black, non high contrast is an enormous strain on eye and vision health. And that poor graphic design helps promote eye diseases such as cataracts, macular degeneration and glaucoma. It sets medical advances in optometry and optical dispensing back to the 19th century. The contention that gray font is healthy for vision is wrong and dangerously unhealthy. \Why promote a graphic design that mocks eye health?

  35. Jim Pooley Reply

    I loathe the ever creeping movement to go to light grey thin fonts on grey backgrounds. I now loathe using my computer especially MS Office etc because of the eye strain grey gives me. I much prefer black font on a white-ish background.

    Everything is washed out light blues/light greys on a light grey background…and people continue to complain but developers ignore all this. And given the lack of adjustment MS etc now allow us we get what they want us to have rather than being able, like in the past, to adjust ‘out user experience’. There is a major arrogance in software design these days which is basically: You’ll get what we give you because we know best EVEN if you do complain.

    I spend more time adjusting my PC set-up to make it less fatiguing than I do working these days.

  36. TommyT Reply

    This militant light gray on even lighter gray trend misses the bigger picture. Gray on gray causes eyestrain because it is almost illegible, period. The user has to lean in close just to try to make out the text – causing neck strain as well as eyestrain. Since you have to hunch over constantly to get closer to the screen just to read some text, that makes low-contrast a very bad choice ergonomically. The poor posture required to read a low-contrast screen also aggravates lower back pain. And since the user is forced to adjust screen brightness to the maximum just to make the text half-way legible, that defeats the purpose of gray-on-gray right from the start. Think of all that extra radiation emitted because some designer unthinkingly followed the herd and used low-contrast text.

    Low-contrast also violates one of the basic principles of good design. When you design a door, you don’t decide how high to make the door according to the height of just one segment – let’s say the shorter segment – of the population. And you don’t set it to accommodate the average height. Doors must be high enough to accommodate the tallest segment of the population, and they thereby also accommodate all of the shorter folks as well. Normal contrast accommodates almost everyone. Low-contrast discriminates against a large segment of the population, particularly older people, but also anyone with impaired vision. So low-contrast is bad from an accessibility standpoint as well. The constant aggravation caused by low-contrast text makes it a contributor to poor mental health too. Looked at from almost any angle, low-contrast is a poor design choice for text.

    ps. I use a Firefox addon called Legibility which helps to up the contrast of poorly designed web pages, but Microsoft Windows is a lost cause. Office is now almost unusable. Maybe I should move to Linux…

  37. William Shurtleff Reply

    I sbsolutely hate white text on black; it gives me a headache within a minute or two. I never connected my astigmatism to the problem before though. Now, if someone asks to look at their code in white-on-black, I say no.

  38. Binoy Thomas Reply

    Super article by Anthony, Thanks.
    my suggestions are-
    Web browsers are giving more importance to youngsters for their business mainly with social media interaction, games, movies etc. that is why grey (off-black) font. Their eye vision is OK. I think we should apply BLACK font in off-white background to get more preference to senior citizens. Around 38 yrs, vision problem may be there for an average people. For example, this comment box is dim, not so clear to my eyes! Reading habit will be a companion among old age. Use BLACK font on off white background, then it will compromise to all eyes. Also, we can reduce screen resolution to save battery charge. If grey, we need high resolution during outdoor.

Leave a Reply

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