You are currently using a browser that is no longer supported and may therefore cause display errors. Feel free to switch to another browser to experience a better design.

Cookies help us in providing our services. By using our services, you agree that we save Cookies. Learn more.

Close

Thinking Out of the Box

The truth is black on white.

Black text on a white background is trustworthy. Even more so: black on white is a fact. It is printed and displayed on screen. The truth is said to be “black on white”. Except when it is not. In programming, the truth oftentimes is white on black. And the truth was white on a blackboard back in school. There are reasons for these exceptions and there are reasons for the rule. I’ve collected some of the reasons that might be interesting for interface designers.

Blackboard_SchwarzAufWeiss

Let me start with a clarification: this is an article on black and white with black-and-white conclusions. I will stick to these topics and exclude variations of text/background contrast and text colors although they also strongly influence readability. In this text, “black on white” includes any form of dark text on light background, and “white on black” means any light text on dark background. White-on-black code, one exception to the dominance of black-on-white text, was an exception made because of technology limitations: some old cathode ray tube (CRT) monitors did not reach pixel refresh rates at 60 Hertz, the threshold above which we see a flicker-free image. Pixels on these CRT monitors flickered visibly and caused eye strain over time. The solution was to illuminate as few pixels as possible, as black pixels were untouched by the cathode ray and did not flicker.

For the technically minded: this is an original DEC VT220 connected to a machine running ELinks, which has loaded m.twitter.com. David Glover, CC BY-NC-SA 2.0

This is why command line interfaces used white text on black backgrounds – if the interface is all text, the eye strain reduction is valuable, especially after hours of work. White-on-black text became associated with programming, leading to the cliché of hackers in darkened rooms and the visual of the green-on-black matrix. This is a case of technical limitations influencing interface design and becoming a cultural convention.

As for the school blackboard, I have no good idea. Erasable writing materials are sensible for writing practice. Chalk (which as a matter of fact is white) and slate (which as a matter of fact is black) were common and relatively cheap. But other historic erasables like sand, clay or wax tablets did not use the white-on-black scheme. For quick notes, cheapness and availability probably overruled other factors.

Black on white – History

Books, of course, are universally printed in black ink on white paper. Paper evolved as the cheaper alternative to parchment, which was also white. Other historic writing surfaces like birch bark and papyrus are also white.

Paperback Edition of Catch-22

Print on paper: paperback edition of Catch-22

Manuscript on parchment: “Treatises On Natural Science, Philosophy, And Mathematic”, England ca. 1300

Manuscript on birch bark: the Rupavatra, a grammatical textbook based on the Sanskrit grammar of Panini, Kashmir, 1663, Wellcome Library, London, CC BY 4.0

Hieroglyphs on papyrus, Radek Szuban, CC BY-NC 2.0

It is black signs on white background, from first human graphic activity: the oldest known cave paintings in Europe were painted with black and red colors on white limestone – 40.800 years ago, in the Stone Age Cave of El Castillo in the north of Spain. In fact, nearly all cave paintings were painted with red, brown or black pigments on light surfaces. This may have geologic reasons: limestone mountains have an unusual number of caves, which became Stone Age homes and ritual places. When cavemen wanted to mark the white cave walls, the suitable pigments had to be dark. This is where I lost the historical trail – with many examples that show black-on-white text being the norm, but without an explanation. “We’ve always done it this way” is a bad argument, but 40.800 years are close to “always” when it comes to cultural history. Black signs on white background are a pretty established convention to lean on.

Interior of the Cave of El Castillo

That is what Xerox did in 1973, when the company started to look beyond printing. They founded PARC, the Palo Alto Research Center, and designed Alto, the first computer using a desktop metaphor. Today it is still known as the inspiration for Windows and Mac OS but back then it was a revolution. Xerox aimed to create a more accessible computer and started from a printer perspective: the Alto had a monitor with the dimensions of a US letter sheet of paper, portrait orientation, and a resolution of 72 pixels per inch (sounds familiar?) to resemble the 72 typographical points that make up an inch. Consequently, Bravo, the Alto’s text editor, displayed black text on white background to preview the printed page. It became the first WYSIWYG text editor and probably the first interface to bring paper’s black-on-white tradition to the screen. Xerox’s switch became the norm for word processing. It also shows how convention influences interface design – recognizable, existing patterns make for accessible interfaces.

Xerox_Alto_Bravo

The Bravo text editor on the Xerox Alto’s portrait-orientation screen.

 

Black on white – Perception

Let’s devote a paragraph to the misconception that white-on-black text is harder to read because bright letters melt into each other. The observation is right: legibility suffers. But the conclusion is wrong, because the opposite scheme, black-on-white text, has the same problem: the light background shines brighter than the text, spilling over the black letterforms. The cause of the lowered readability is not light bloom but a bad choice of fonts: thin fonts on bright white background are hard to read, bold fonts on black background as well. In both cases, designers have to increase the amount of black to balance the brightness of the white portions. Using delicate font weights for white-on-black text and robust font weights for black-on-white text improves readability.

Black on white, the Baskerville’s thin lines are eaten away by the surrounding whitespace and white counters. They stay whole in white on black. The curvy Cooper Black is at home in black on white. Inverted to white on black, the bold letterforms squash their counters and the space between letters. In this case, it should be typeset with more than standard leading.

Astigmatism is a common defect of the human eye. About a third of the population is affected. Astigmatism occurs when the eye’s lens cannot focus all incoming light into one point anymore. Shapes are blurred, which is especially obvious on text. However, in bright environments the pupil contracts, reducing the focus aberration and the blur. Black text on white background creates a brighter reading environment, making the text sharper and more legible for astigmatic readers.

High light sensitivity, photophobia, is another common imperfection affecting around ten percent of the population. The higher a person’s light sensitivity is, the quicker white background will tire and eventually discomfort them. The black-on-white scheme helping astigmatic readers becomes problematic to light sensitive people over time, while the white-on-black text preventing eye fatigue for light sensitive readers is blurrier to astigmatic persons. Giving the user the possibility to use their own preferences is a way to overcome this dilemma. Even in this case, typography has to take into account the human perception and its imperfections.

Black on white – Context

The eye adapts to the environment’s brightness – after entering a house from a sunny street, or being blinded by headlights in the night. This process called adaptation needs some time and effort, both increasing with age. Repeated adaptation, for example while reading a bright screen in dark surroundings or a dark screen in bright sunshine, diminishes contrast perception. Conversely, text brightness that matches the environment reduces the adaption effort.

Kindle_BlackOnWhite

The bright text layout is readable through the lamp’s reflection.

KindleWhiteOnBlack

The dark text layout is illegible in the reflection.

Black background is preferable in dark environments like cockpits at night, darkened rooms or while reading in bed. Conversely, white background is better for bright offices and the outdoor daytime. This scheme is also more legible through reflections from lights or the sun. Reflections quickly make white-on-black text illegible on black screens and glossy print.

Paperback Edition of Catch-22

Optimized for well-lit reading: bright, but not perfect white paper. Lighter than the background, but not overwhelmingly bright.

Readers are accustomed to texts that are slightly brighter than their surroundings. The lighter content holds their attention, while adaptation effort stays low. In interfaces, essential texts can be highlighted by black-on-white typography, with the white background area subtly showing readers its importance. Contrarily, secondary text like menus in white on black blends into the background while other content shines. Context is probably the strongest of all these factors that influence interface design – if the environment is known, text color is just one of many interface elements that might be optimized.

XING-Windows8

We used a black-on-white color scheme for the XING Windows 8 App. It is used in well-lit offices, hotels, trains and planes.

OmicronCMControl

For the OMICRON CMControl interface, we chose white-on-black text. This power supply diagnostics device must be legible in dark transformer and relay stations.

 

Conclusion

The truth is “black on white” – for content, for bright environments, for crisp reading. The truth is “white on black” – for menus, for dark environments, for light-sensitive readers. With some websites, e-book readers and navigation devices, the users can choose which scheme they prefer. But in addition to that, the designer’s choice depends on technology, culture, perception and context. Designers need to keep all of them in mind. They move between these overlapping fields, making knowledge in all of them necessary. But their job is not to become experts, but to be aware of the factors and still create coherent symbols, typography, layouts and interfaces. Admittedly, this is easier written than done.

If you should be interested in getting help with your design tasks, you can find out more about how we can support you on our Design services page.

 

Windows is a trademark or registered trademark of Microsoft Corporation in the US and/or other countries. Mac OS is a trademark or registered trademark of Apple Inc. in the US and/or other countries. Xerox and Alto are trademarks or registered trademarks of Xerox Corporation in the US and/or other countries. XING is a trademark or registered trademark of XING AG in the US and/or other countries. OMICRON and CMControl are trademarks or registered trademarks of OMICRON electronics GmbH in the US and/or other countries.

Want to know more about our services, products or our UX process?
We are looking forward to hearing from you.

Corporate Experience Manager
+49 681 959 3110
Contact form

Before sending your request, please confirm that we may contact you by clicking in the checkbox above.
  • Saarbrücken

    Science Park Saar, Saarbrücken

    South West Location

    Headquarter Saarbrücken
    Centigrade GmbH
    Science Park 2
    66123 Saarbrücken
    Germany
    Saarland
    On the map

    +49 681 959 3110

    +49 681 959 3119

  • Mülheim an der Ruhr

    Games Factory Mülheim an der Ruhr

    North West Location

    Office Mülheim
    Centigrade GmbH
    Kreuzstraße 1-3
    45468 Mülheim an der Ruhr
    Germany
    North Rhine-Westphalia
    On the map

    +49 208 883 672 89

    +49 681 959 3119

  • Haar · Munich

    Haar / München

    South Location

    Office Munich
    Centigrade GmbH
    Bahnhofstraße 18
    85540 Haar · Munich
    Germany
    Bavaria
    On the map

    +49 89 20 96 95 94

    +49 681 959 3119

  • Frankfurt am Main

    Frankfurt am Main

    Central Location

    Office Frankfurt
    Centigrade GmbH
    Kaiserstraße 61
    60329 Frankfurt am Main
    Germany
    Hesse
    On the map

    +49 69 241 827 91

    +49 681 959 3119