Light text on a dark background vs. dark text on a light background: which allows the reader to keep focusing for longer?

Question

I did not want to get to the endless war of dark-on-light vs light-on-dark, but recently I discovered something interesting: while light-on-dark text is still less tiring for my eyes (and I also personally prefer it more), dark-on-light seemed to do better on holding my attention on the content of the text; in other words it helps focusing more on what you read. This is much more noticeable with longer text that take a few minutes to read.

I'm looking for any papers, researches, measurements, Google Analytics, anything, that was done to see if a text was more understandable, stuck more with the reader, made it easier to recall from memory and not for the ones concentrating on readability.

Has anyone done research indicating one way or the other?

Answer 1

The most fundamental fundamental of good typography for long text is that the type should be "invisible" to the reader, so there is nothing to interfere with the communication of information. From that, we get the principles that serif faces and lightweight sans are better long text than regular sans, and dark on light tends to be preferable to light on dark. There is a short summary of this generally accepted typographic wisdom here. You really can't divorce readability from comprehension, and therefore retention.

That said, I know several reasons for lack of retention that have nothing to do with typography, and I've also seen some downright idiotic research in this area (like the guy who cut text columns down the middle and separated them by 1/4 inch because it "forced the reader to concentrate more in order to follow the text"). So your experience in this case may be related to the type, and it may not.

Sticking with typography, though, the bottom line is that what is comfortable to read is more likely to be absorbed than what is not.

There's a raft of research in the optometric field, particularly vision therapy, pointing to a connection between poor eye coordination ("convergence insufficiency" in the jargon) and inattentiveness, lack of retention, even a dislike of reading generally. (Often misdiagnosed as dyslexia or ADHD.) The effect of the various forms of convergence insufficiency is a kind of eyestrain that makes reading uncomfortable. The same is true of people who need corrective lenses to read but don't wear them.

It's not much of a stretch to conclude that anything about the typography of a long text passage which is less-than-ideal is likely to have a negative effect on attention and retention.

In general, the biggest source of discomfort when reading long text passages is excessive contrast. The ni plus ultra of this is taking a book that's printed on bright white paper and trying to read it in direct sunlight.

When looking at a generally dark field (light-on-dark text, for example), the pupil of the eye widens. Without getting into the technical details, wider pupil == less sharp focus, a slight fuzzing out at the edges of the type. That's just how optics work. This is also why it's so painful to read in dim light. The pupils are at maximum dilation, which means that focus is at its worst.

Looking at a light page, the pupil narrows. Narrow pupil == sharper focus (which incidentally increases the edge contrast of objects in the visual field). From this, you might conclude that sans type, being of chunkier build than its serifed cousins, reads better reversed out of a dark background than a serif face, and you would be right.

Helvetica and similar sans faces create strong contrast with their background, and are uncomfortable to read when rendered black on white or white on black, unless you use the lightest weight. When I'm setting text in a sans, I'll use the lightest weight available and/or something like a grey

Traditional serif text faces such as Caslon, Jenson and Garamond have less visual contrast printed on a light substrate, so are more comfortable to read. Slab serifs like Egyptian Slate are readable only in lighter weights. A Didone or Bodoni, with its strongly contrasting thick and thin strokes, tends to be too contrasty for comfortable reading.

Focus problems can be subtle. It doesn't have to be a question of light-on-dark. The eye focuses red and green light differently, and if you really want to give yourself a headache, convert a few pages of text to red on green and try to read them. It hurts!

Answer 2

A lot of people have researched this in a variety of ways and capacities. Some can be found using Google Scholar. Here are a few excerpts I found that pertain to the question, and their source:

2.2.2. Color and visual attention

Among a variety of graphic components on screen, color is one of the powerful components of design. Interface designers must be able to understand how to apply colors in design. As Tufte (1989) asserts, ‘‘skillful visual design of computer screens—with care given to color, typography, layout, icons, graphics and coherency—substantially contributes to quality and usability.’’ Several studies show the effects of color in human information processing. Hoadley (1989), for example, states that color, one of the attributes of a visual stimulus, can attract human attention. Moreover, Marcus (1992) expresses that color is the most complicated visual component. Furthermore, extensive studies on color in visual attention, particularly in visual search, show that color is an object component that effectively distinguishes a stimulus from the surroundings (e.g., D’Zmura, 1991).

The effects of color on human performance have been evaluated in several task settings. These task settings are detecting colored targets among non-colored distractions, detecting colored targets among colored distractions whereby the color of targets is different from the color of distractions, and detecting targets containing the conjunctions of features (e.g., color and orientation). Treisman and Gelade (1980), for instance, report that the need of attention to join object features together causes a participant takes more time in detecting a green letter T on a screen that contains an equal number of brown T’s and green X’s. Another study shows that in searching for target words from a list of colored target words and colored non-target words, text-color differences significantly influence search time, particularly when the target color is known (Nes et al., 1987).

Clearly, evidence shows that color has an impact on visual attention in various contexts (e.g., visual searching and reading). The above studies manipulate the color of targets and non-targets, and non-targets are defined as distractions. This present study, on the other hand, does not explore colors of target words and non-target words. Rather, colors of animated banner graphics (distractions) are investigated.

Zhang (1999) has investigated a similar problem. In that study, bright color is the vital attribute of animated banners, which can greatly distract user attention. The brightness attribute is explored in two levels, bright color and dull color. No hue color is reported, which leaves a difficulty for further investigations. However, the result shows that an animated graphic with a bright color distracts a user’s attention more than an animated graphic with a dull color.

In terms of color usage in graphics, general guidelines are well discussed. Marcus (1992) recommends using appropriate colors for central and peripheral areas. Blue is appropriate for large areas such as screen backgrounds. Red and green are recommended for an area in the center of the visual field, whereas black, white, yellow and blue are better used in the periphery of the visual field.

Moreover, every combination of colors can probably create different effects. For instance, studies show that ineffective combinations of colors on graphic designs can reduce user performance and satisfaction (e.g., Latomia and Happ, 1987). Effective combinations of text and background colors of animated banner graphics are one of the influencing factors that could facilitate information processing and increase click-through rate, readability of banner message, brand awareness, appreciation of Web appearance, and usability of a Web page.

Source: Cultural differences on attention and perceived usability: Investigating color combinations of animated graphics

There are two concepts to explore further in relation to this question. Zhang's research on brightness as a distraction, and Marcus' recommendation of different colors for different areas of focus. The following research seems to address both, in a single paragraph!

Findings on attention showed that on any background, colors of maximum saturation and brightness attract the most attention (67%). Yellowgreen, green, cyan range (45%) attracts attention, followed by red, magenta range (30%). Findings on preference showed that colors having maximum saturation and brightness are most preferred (25%). Blue is the most preferred hue regardless of the background (25%). Foreground-background color relationships in terms of attention and preference are also included in the findings of the study.

Source: Effects of Hue, Saturation, and Brightness on Attention and Preference

---

My own conclusion:

Based on the new reading I did which was more than just those excerpts, as well as other papers I've read, it would seem to me that contrast of brightness is important. Perhaps this is why great designers often avoid pure white and pure black. This very site only has off-white and dark greys. So what I find the answer wanting to be is that Light On Dark vs Dark On Light for attention is less important then the Range of brightness. However, as you mentioned and I could link many studies which indicate, light on dark is easier to read. One might as others in this question offer the contradiction that by using light on a dark background it allows the eyes an easier time focusing on those things. Which seems to me an accurate statement, but again within a reasonable range. A pure black background is no good.

This also agrees with Alan's wonderful answer regarding contrast and the more mechanical side of how we view these colors:

In general, the biggest source of discomfort when reading long text passages is excessive contrast. The ni plus ultra of this is taking a book that's printed on bright white paper and trying to read it in direct sunlight.

When looking at a generally dark field (light-on-dark text, for example), the pupil of the eye widens. Without getting into the technical details, wider pupil == less sharp focus, a slight fuzzing out at the edges of the type. That's just how optics work. This is also why it's so painful to read in dim light. The pupils are at maximum dilation, which means that focus is at its worst.

Of course I'm no scientist, psychologist, or color-theory expert so read the entire reports on your own and draw your own conclusions.

Answer 3

While this is a subjective answer, I feel that the answer is: it's subjective and completely based on past experience and your own subconscious expectation.

I have strongly noticed when changing from one to the other, regardless of whether I have switched to dark-on-light or vice-versa, that if it is not the same as what I am conditioned to for the particular context, that it will be very hard to concentrate.

Even with two very closely related environments, code windows and command windows, I find I need them different. I cannot comfortably use a light-on-black code window or a black-on-white command window, for example.

Answer 4

As per our OP comments discussion.

This maybe down to the fact light-on-dark is easier to see due to only the text and content is emitted at you via light. So less information helps vision focus.

We expanded more on this in the OP but this would be my submitted answer.

Answer 5

I generally keep my room fairly dark for comfort. As such, a white screen (like this one) with black text on it is difficult to read. It just seems like a blinding white blob with some smudges on it that it hurts to read.
All other factors are somewhat secondary when it hurts to read a page.

I figure if people have their rooms more brightly lit then the opposite might be the case... Either way, it is about time that people started giving the option to have it either way, rather than forcing their own preferences or catering exclusively to the average.