by anthony on 04/28/11 at 11:11 am
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 safely apply these techniques to your design 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.
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 from 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 user’s 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 the user’s 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 non-white 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.
However, if your site uses a dark background, display your paragraph text in gray instead. 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, then 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 is a time 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 get the user’s attention. This is because 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 these types of text 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 dark backgrounds as a highlighting tool is a smart way to call out important elements that users often scan. Applying this dark and light colors correctly on your website will make your text easy to read, so that user’s can enjoy your content without getting an eye ache.