Many websites use black text on a light background to display their content because it’s easy to read. However, using white text on a dark background also has its advantages. Knowing when to use one over the other will allow you to design your website without hurting user readability.

Reading vs. Scanning

When it comes to text on websites, users either read or scan. Reading involves focusing on words for a thorough comprehension of the subject. Scanning involves skimming the words for a broader comprehension of the subject. When you should use white text on a dark background depends on whether users are scanning or reading text.

Paragraph Text

The kind of text that users read is paragraph text. You should avoid using white text on a dark background when displaying paragraph text to make it easier for them to read. Forcing users to fixate on the white text for a long time can strain the user’s eyes. This is because white stimulates all three types of color sensitive visual receptors in the human eye in nearly equal amounts [source]. This makes reading white paragraph text on dark backgrounds stressful on the eyes.

White also reflects all wavelengths of light. Because the words and letters in paragraph text are compact and close together, when white text reflects light, the reflected light scatters and runs into neighboring words and letters. This makes the shape of the words and letters harder to perceive, which affects readability. Compare that with black text, where the black absorbs the light around each word and letter, making them easy to distinguish.

That’s why a better choice for displaying paragraph text is black text on a light background with a tint of gray. With a gray tint background, less light reflects behind the words, making it easier on the eyes. The black text works better because black is also a color that doesn’t reflect light in any part of the visible spectrum [source]. Therefore, fixating on black text while reading won’t put as much stress on the user’s eyes because it absorbs the light that hits each word.

If your site uses a dark background, you should display your paragraph text in gray tint. This won’t put as much stress on the user’s eyes because gray text isn’t as bright as white text. It’ll reflect less light, making it easier to read. Keep in mind that if you’re reading text in a dark room where no light is present, white text on a black background isn’t as hard to read. This is because no light is reflecting off it in a dark room.

Headings, Titles and Labels

There are times when white text on a dark background works well. This is when users are scanning text. Users typically scan headings, titles and labels. Using white text on a dark background for these types of text is an effective way to highlight them to grab user attention.

White reflects all the colors of the visible light spectrum into the eyes [source]. This makes the text bright and distinct. You won’t have to worry about putting stress on the user’s eyes because scanning doesn’t take long visual fixations. All it takes is a quick sweep of the eyes to scan a heading, title or label.

Using white text on a dark background as a highlighting tool is a smart way to call out text that users scan. But black text on a light background is better suited for paragraph text that users read. Apply dark and light colors correctly so that users can enjoy your content without getting an eye ache.

Toolkits