Why you should never use pure black for backgrounds or text

Pure black text on white background

Pure black text on a white background can cause eye strain and make it difficult for users to read for long periods of time. White is 100% bright, black is 0. This difference in color brightness can create intense light levels that overpower your reader. When you scroll, your eyes have to work much harder to adjust.

‍

Turning on a bright light in a dark room highlights the darkness. This rapid change can be difficult on your eyes, which is one reason why it is not recommended to experiment with light sources at night. However, reading is better in low light because our eyes adjust more easily to changes in brightness - just like when we turn on a dim light in a dark room.

‍

‍

Instead of black text, use dark gray text on a white background, which makes the change in brightness less drastic. This prevents over-stimulation of the retina and allows users to read for longer periods of time.‍

‍

As you can read in scientific research: white text on a black background stimulates the "ON" cells in the eyes more than black text on a white background, which is why some people find it easier to read. A new study by a team of scientists suggests that "white text on a black screen may inhibit myopia, while black text on a white background may stimulate myopia." Reading only in dark environments is discouraged due to disturbing polarization and contrast effects.

‍

White text on a black background

You should avoid using pure black backgrounds when it comes to web design. A pure black background will block all the light emitted from the screen, making it difficult for your viewers to read your text. Due to light reflecting off most screens at different angles, it makes your eyes work harder and open wider. Therefore, some people suffer from a condition called "halation", in which white letters can bleed into black backgrounds and make text appear blurry.

‍

Consider using a dark gray background for better lighting and increased reading endurance.

‍

High contrast for accessibility

Pure black should not be harmful to all users. Low vision users who have vision problems but are not legally blind tend to read text better with plain black text or white text on a black background. Designing for people with color blindness can be difficult, but there are a few tricks you can use. Try using black instead of dark gray for accessibility mode, and remember to design with normal vision users in mind as well.

‍

Balanced contrast for better readability

High color contrast is useful for readability. Color contrast is necessary to make text legible because it affects the user's eyes. The ideal balance is between text and background contrast, which is clear but not too light or too dark.‍

‍

If you are ever unsure of your contrast, you should use the Color Contrast Checker to get an idea of what the optimal range is for you. As long as the contrast is not too low, the tool does not check for contrast problems. However, if it ever detects a high level of contrast that some people may not be able to see, it will notify you as soon as possible.‍

‍

If, like me, you use Figma to design websites or mobile apps, I highly recommend you download Contrast . The application is available for download from Figma.

‍

Whether you use black and white or another color text, make sure you think about how it will impact the user. Designing to reduce stress on the eyes is extremely important. For example, if images are as large and clear as possible, people will spend more time reading with less strain on their eyes.

‍

‍