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

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.

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