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