Did you know you’re committing a sin of readability if you use pure black on your designs?
A survey found “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.
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.
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.
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.
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.
Books
Tools
Affiliates
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.
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é
Agree, BUT we’d fail our WCAG 2.0 test requirements.
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.
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.)
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.
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.
Great point. Black always looks cool but let’s face it, it’s too harsh on the eyes. Grey all the way!
Personally I agree with you, but in some cases (some industries) using pure black works better than gray.
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.
Pure black backgrounds also can save electricity/battery on oled devices like iPhone X
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…
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.
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.
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
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.
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.
This will all change when millennials become 50+ years old and realize how hard it is to try to read grey.
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.
I disagree. Black text is not a problem. Grey text is a problem. The strain is caused by the brightness of the background, not the font colour.