Light-on-dark color scheme
Encyclopedia
A light-on-dark color scheme is a color scheme
that uses light-colored text on a dark background and is often discussed in terms of computer user interface
design.
Originally, computer user interface images were formed on CRT
s. The phosphor
was normally a very dark color, and lit up brightly when the electron beam hit it. The human eye adjusts to make this appear to be green or amber on black, depending on phosphors applied on a monochrome
screen. RGB screens continued along a similar vein, using all the beams set to "on" to form white.
With the advent of teletext
, research was done into which primary and secondary light colors and combinations worked best for this new medium. From a palette of black, red, green, yellow, blue, magenta, cyan and white, it turned out that cyan or yellow on black was typically found to be optimal.
The opposite color scheme, dark-on-light color scheme, was originally introduced in WYSIWYG
word processor
s, to simulate ink on paper.
There seems to be a dispute among vision and perception researchers about whether it is actually easier or healthier to read text on dark or light background; there is a similar dispute between users, when using each other's computer terminals.
with light text on a dark background is easier to read on the screen, because the lower brightness causes less eyestrain. The caveat is that most pages on the web
are designed for white backgrounds; GIF
and PNG images with a transparency bit instead of alpha channels tend to show up with choppy outlines, as well as causing problems with other graphical elements.
It is not necessary that a web design work well with only one color scheme. There are many mechanisms of web architecture that allow designs to work well with any color scheme a user might prefer. This technical flexibility is a product of the web architect's concern for accessibility and user preference empowerment, though designers rarely utilize this technical flexibility.
, the software assumes the background color is white.
Unlike paper which reflects ambient light, both CRT
and LCD
displays emit light of sufficient brightness to overcome ambient light. As ambient light varies, the relative brightness of the display can vary widely.
Color scheme
In color theory, a color scheme is the choice of colors used in design for a range of media. For example, the use of a white background with black text is an example of a basic and commonly default color scheme in web design....
that uses light-colored text on a dark background and is often discussed in terms of computer user interface
User interface
The user interface, in the industrial design field of human–machine interaction, is the space where interaction between humans and machines occurs. The goal of interaction between a human and a machine at the user interface is effective operation and control of the machine, and feedback from the...
design.
Originally, computer user interface images were formed on CRT
Cathode ray tube
The cathode ray tube is a vacuum tube containing an electron gun and a fluorescent screen used to view images. It has a means to accelerate and deflect the electron beam onto the fluorescent screen to create the images. The image may represent electrical waveforms , pictures , radar targets and...
s. The phosphor
Phosphor
A phosphor, most generally, is a substance that exhibits the phenomenon of luminescence. Somewhat confusingly, this includes both phosphorescent materials, which show a slow decay in brightness , and fluorescent materials, where the emission decay takes place over tens of nanoseconds...
was normally a very dark color, and lit up brightly when the electron beam hit it. The human eye adjusts to make this appear to be green or amber on black, depending on phosphors applied on a monochrome
Monochrome
Monochrome describes paintings, drawings, design, or photographs in one color or shades of one color. A monochromatic object or image has colors in shades of limited colors or hues. Images using only shades of grey are called grayscale or black-and-white...
screen. RGB screens continued along a similar vein, using all the beams set to "on" to form white.
With the advent of teletext
Teletext
Teletext is a television information retrieval service developed in the United Kingdom in the early 1970s. It offers a range of text-based information, typically including national, international and sporting news, weather and TV schedules...
, research was done into which primary and secondary light colors and combinations worked best for this new medium. From a palette of black, red, green, yellow, blue, magenta, cyan and white, it turned out that cyan or yellow on black was typically found to be optimal.
The opposite color scheme, dark-on-light color scheme, was originally introduced in WYSIWYG
WYSIWYG
WYSIWYG is an acronym for What You See Is What You Get. The term is used in computing to describe a system in which content displayed onscreen during editing appears in a form closely corresponding to its appearance when printed or displayed as a finished product...
word processor
Word processor
A word processor is a computer application used for the production of any sort of printable material....
s, to simulate ink on paper.
There seems to be a dispute among vision and perception researchers about whether it is actually easier or healthier to read text on dark or light background; there is a similar dispute between users, when using each other's computer terminals.
Energy usage
Light on dark color schemes require less energy to display on some display technologies, such as OLED displays. This can impact battery life and overall energy conservation.Issues with the web
Some argue that a color schemeColor scheme
In color theory, a color scheme is the choice of colors used in design for a range of media. For example, the use of a white background with black text is an example of a basic and commonly default color scheme in web design....
with light text on a dark background is easier to read on the screen, because the lower brightness causes less eyestrain. The caveat is that most pages on the web
World Wide Web
The World Wide Web is a system of interlinked hypertext documents accessed via the Internet...
are designed for white backgrounds; GIF
GIF
The Graphics Interchange Format is a bitmap image format that was introduced by CompuServe in 1987 and has since come into widespread usage on the World Wide Web due to its wide support and portability....
and PNG images with a transparency bit instead of alpha channels tend to show up with choppy outlines, as well as causing problems with other graphical elements.
It is not necessary that a web design work well with only one color scheme. There are many mechanisms of web architecture that allow designs to work well with any color scheme a user might prefer. This technical flexibility is a product of the web architect's concern for accessibility and user preference empowerment, though designers rarely utilize this technical flexibility.
"Blazing white"
Blazing white is a term used to describe black text on a bright background, found in some software packages, often without the option to set colors. Another common problem is, when using anti-aliasingAnti-aliasing
In digital signal processing, spatial anti-aliasing is the technique of minimizing the distortion artifacts known as aliasing when representing a high-resolution image at a lower resolution...
, the software assumes the background color is white.
Unlike paper which reflects ambient light, both CRT
Cathode ray tube
The cathode ray tube is a vacuum tube containing an electron gun and a fluorescent screen used to view images. It has a means to accelerate and deflect the electron beam onto the fluorescent screen to create the images. The image may represent electrical waveforms , pictures , radar targets and...
and LCD
Liquid crystal display
A liquid crystal display is a flat panel display, electronic visual display, or video display that uses the light modulating properties of liquid crystals . LCs do not emit light directly....
displays emit light of sufficient brightness to overcome ambient light. As ambient light varies, the relative brightness of the display can vary widely.
External links
- Light on Dark Showcase of sites using a light on dark color scheme