: Light text on a dark background vs. dark text on a light background: which allows the reader to keep focusing for longer? I did not want to get to the endless war of dark-on-light vs light-on-dark,

@RJPawlick971

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.

Vote Up Vote Down

@Miguel516

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.

Vote Up Vote Down

@Sims5801359

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.

Vote Up Vote Down

@Berumen635

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.

Vote Up Vote Down

@Hamm6457569

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!

Vote Up Vote Down