{"id":5175,"date":"2015-01-20T08:30:41","date_gmt":"2015-01-20T06:30:41","guid":{"rendered":"http:\/\/www.centigrade.de\/de\/blog\/?p=5175"},"modified":"2021-01-07T15:20:07","modified_gmt":"2021-01-07T14:20:07","slug":"the-truth-is-black-on-white","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/en\/blog\/the-truth-is-black-on-white\/","title":{"rendered":"The truth is black on white."},"content":{"rendered":"<p>Black text on a white background is trustworthy. Even more so:\u00a0black on white is a fact. It is printed and displayed on screen. The truth is said to be &#8220;black on white&#8221;. 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\u2019ve collected some of the reasons that might be interesting for interface designers.<\/p>\n<p><!--more--><\/p>\n<p><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Blackboard_SchwarzAufWeiss.jpg\"><img decoding=\"async\" class=\"alignnone size-full wp-image-5382\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Blackboard_SchwarzAufWeiss.jpg\" alt=\"Blackboard_SchwarzAufWeiss\" width=\"670\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Blackboard_SchwarzAufWeiss.jpg 3008w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Blackboard_SchwarzAufWeiss-300x199.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Blackboard_SchwarzAufWeiss-1024x681.jpg 1024w\" sizes=\"(max-width: 3008px) 100vw, 3008px\" \/><\/a><\/p>\n<p>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, \u201cblack on white\u201d includes any form of dark text on light background, and \u201cwhite on black\u201d 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\u00a0technology limitations: some old cathode ray tube (CRT) monitors did not reach pixel refresh rates at\u00a060 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.<\/p>\n<div style=\"width: 680px\" class=\"wp-caption alignnone\"><img decoding=\"async\" title=\"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\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/CRT_displaying_Twitter.jpg\" alt=\"\" width=\"670\" \/><p class=\"wp-caption-text\">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<\/p><\/div>\n<p>This is why command line interfaces used white text on black backgrounds \u2013 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\u00e9 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.<\/p>\n<p>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.<\/p>\n<h3>Black on white \u2013 History<\/h3>\n<p>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.<\/p>\n<div id=\"attachment_5184\" style=\"width: 680px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Catch22.jpg\"><img decoding=\"async\" aria-describedby=\"caption-attachment-5184\" class=\"wp-image-5184 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Catch22-e1421339966169.jpg\" alt=\"Paperback Edition of Catch-22\" width=\"670\" \/><\/a><p id=\"caption-attachment-5184\" class=\"wp-caption-text\">Print on paper: paperback edition of Catch-22<\/p><\/div>\n<div id=\"attachment_5403\" style=\"width: 680px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Parchment_Manuscript_Treatises_On_Natural_Science_Philosophy_And_Mathematics_Planets.jpg\"><img decoding=\"async\" aria-describedby=\"caption-attachment-5403\" class=\"size-full wp-image-5403\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Parchment_Manuscript_Treatises_On_Natural_Science_Philosophy_And_Mathematics_Planets.jpg\" alt=\"\" width=\"670\" \/><\/a><p id=\"caption-attachment-5403\" class=\"wp-caption-text\">Manuscript on parchment: \u201cTreatises On Natural Science, Philosophy, And Mathematic\u201d, England ca. 1300<\/p><\/div>\n<div id=\"attachment_5404\" style=\"width: 680px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5404\" class=\"wp-image-5404\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Birch_Bark_Manuscript_from_Kashmir_of_the_Rupavatra_Wellcome_L0032691-e1591257292421-1365x1024.jpg\" alt=\"\" width=\"670\" height=\"503\" \/><p id=\"caption-attachment-5404\" class=\"wp-caption-text\">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<\/p><\/div>\n<div id=\"attachment_5402\" style=\"width: 680px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Papyrus.jpg\"><img decoding=\"async\" aria-describedby=\"caption-attachment-5402\" class=\"wp-image-5402 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Papyrus.jpg\" alt=\"\" width=\"670\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Papyrus.jpg 1600w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Papyrus-300x201.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Papyrus-1024x685.jpg 1024w\" sizes=\"(max-width: 1600px) 100vw, 1600px\" \/><\/a><p id=\"caption-attachment-5402\" class=\"wp-caption-text\">Hieroglyphs on papyrus, Radek Szuban, CC BY-NC 2.0<\/p><\/div>\n<p>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 &#8211; 40.800 years ago, in the Stone Age <a href=\"http:\/\/en.wikipedia.org\/wiki\/Cave_of_El_Castillo\">Cave of El Castillo<\/a> 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 \u2013 with many examples that show black-on-white text being the norm, but without an explanation. \u201cWe\u2019ve always done it this way\u201d is a bad argument, but 40.800 years are close to \u201calways\u201d when it comes to cultural history. Black signs on white background are a pretty established convention to lean on.<\/p>\n<div id=\"attachment_5381\" style=\"width: 680px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Cueva_del_Castillo_interior.jpg\"><img decoding=\"async\" aria-describedby=\"caption-attachment-5381\" class=\"wp-image-5381 size-full\" title=\"Cueva_del_Castillo_interior\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Cueva_del_Castillo_interior.jpg\" alt=\"\" width=\"670\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Cueva_del_Castillo_interior.jpg 1024w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Cueva_del_Castillo_interior-150x150.jpg 150w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Cueva_del_Castillo_interior-300x300.jpg 300w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><p id=\"caption-attachment-5381\" class=\"wp-caption-text\">Interior of the Cave of El Castillo<\/p><\/div>\n<p>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 <a href=\"http:\/\/arstechnica.com\/features\/2005\/05\/gui\/3\/\">Alto<\/a>, 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\u2019s 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\u2019s black-on-white tradition to the screen. Xerox\u2019s switch became the norm for word processing. It also shows how convention influences interface design \u2013 recognizable, existing patterns make for accessible interfaces.<\/p>\n<div id=\"attachment_5379\" style=\"width: 618px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-5379\" class=\"wp-image-5379 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Xerox_Alto_Bravo.png\" alt=\"Xerox_Alto_Bravo\" width=\"608\" height=\"806\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Xerox_Alto_Bravo.png 608w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Xerox_Alto_Bravo-226x300.png 226w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Xerox_Alto_Bravo-300x398.png 300w\" sizes=\"auto, (max-width: 608px) 100vw, 608px\" \/><p id=\"caption-attachment-5379\" class=\"wp-caption-text\">The Bravo text editor on the Xerox Alto&#8217;s portrait-orientation screen.<\/p><\/div>\n<p>&nbsp;<\/p>\n<h3>Black on white \u2013 Perception<\/h3>\n<p>Let\u2019s devote a paragraph to the misconception that <a href=\"http:\/\/uxmovement.com\/content\/when-to-use-white-text-on-a-dark-background\/\">white-on-black text is harder to read<\/a> 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.<\/p>\n<p><img decoding=\"async\" class=\"wp-image-5384\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Hound.png\" \/>Black on white, the Baskerville&#8217;s thin lines are eaten away by the surrounding whitespace and white counters. They stay whole in white on black. <img decoding=\"async\" class=\"wp-image-5385\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Cooper.png\" \/>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.<\/p>\n<p><a href=\"http:\/\/en.wikipedia.org\/wiki\/Astigmatism_(eye)\">Astigmatism<\/a> is a common defect of the human eye. About a third of the population is affected. Astigmatism occurs when the eye\u2019s lens cannot focus all incoming light into one point anymore. Shapes are blurred, which is especially obvious on text. However, in bright environments <a href=\"http:\/\/en.wikipedia.org\/wiki\/Pupillary_light_reflex\">the pupil contracts<\/a>, 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.<\/p>\n<p>High light sensitivity, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Photophobia\">photophobia<\/a>, is another common imperfection\u00a0affecting around ten percent of the population. The higher a person\u2019s 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.<\/p>\n<h3>Black on white \u2013 Context<\/h3>\n<p>The eye adapts to the environment\u2019s brightness \u2013 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.<\/p>\n<div id=\"attachment_5386\" style=\"width: 300px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Kindle_BlackOnWhite.png\"><img decoding=\"async\" aria-describedby=\"caption-attachment-5386\" class=\"wp-image-5386 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Kindle_BlackOnWhite.png\" alt=\"Kindle_BlackOnWhite\" width=\"290\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Kindle_BlackOnWhite.png 850w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Kindle_BlackOnWhite-300x225.png 300w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/a><p id=\"caption-attachment-5386\" class=\"wp-caption-text\">The bright text layout is readable through the lamp&#8217;s reflection.<\/p><\/div>\n<div id=\"attachment_5387\" style=\"width: 300px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/KindleWhiteOnBlack.png\"><img decoding=\"async\" aria-describedby=\"caption-attachment-5387\" class=\"wp-image-5387 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/KindleWhiteOnBlack.png\" alt=\"KindleWhiteOnBlack\" width=\"290\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/KindleWhiteOnBlack.png 850w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/KindleWhiteOnBlack-300x225.png 300w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/a><p id=\"caption-attachment-5387\" class=\"wp-caption-text\">The dark text layout is illegible in the reflection.<\/p><\/div>\n<p>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.<\/p>\n<div id=\"attachment_5184\" style=\"width: 680px\" class=\"wp-caption alignnone\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Catch22.jpg\"><img decoding=\"async\" aria-describedby=\"caption-attachment-5184\" class=\"wp-image-5184 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Catch22-e1421339966169.jpg\" alt=\"Paperback Edition of Catch-22\" width=\"670\" \/><\/a><p id=\"caption-attachment-5184\" class=\"wp-caption-text\">Optimized for well-lit reading: bright, but not perfect white paper. Lighter than the background, but not overwhelmingly bright.<\/p><\/div>\n<p>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 \u2013 if the environment is known, text color is just one of many interface elements that might be optimized.<\/p>\n<div id=\"attachment_5459\" style=\"width: 300px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/XING-Windows8.png\"><img decoding=\"async\" aria-describedby=\"caption-attachment-5459\" class=\"wp-image-5459 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/XING-Windows8.png\" alt=\"XING-Windows8\" width=\"290\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/XING-Windows8.png 1715w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/XING-Windows8-300x225.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/XING-Windows8-1024x768.png 1024w\" sizes=\"(max-width: 1715px) 100vw, 1715px\" \/><\/a><p id=\"caption-attachment-5459\" class=\"wp-caption-text\">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.<\/p><\/div>\n<div id=\"attachment_5460\" style=\"width: 300px\" class=\"wp-caption alignleft\"><a href=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/OmicronCMControl.png\"><img decoding=\"async\" aria-describedby=\"caption-attachment-5460\" class=\"wp-image-5460 size-full\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/OmicronCMControl.png\" alt=\"OmicronCMControl\" width=\"290\" \/><\/a><p id=\"caption-attachment-5460\" class=\"wp-caption-text\">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.<\/p><\/div>\n<p>&nbsp;<\/p>\n<h3>Conclusion<\/h3>\n<p>The truth is &#8220;black on white&#8221; \u2013 for content, for bright environments, for crisp reading. The truth is &#8220;white on black&#8221; \u2013 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\u2019s 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\u00a0than done.<\/p>\n<p>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 <a href=\"http:\/\/www.centigrade.de\/en\/services\/ux-design\">Design services page<\/a>.<\/p>\n<span class='maxbutton-1-container mb-container'><a class=\"maxbutton-1 maxbutton maxbutton-ux-design-de\" title=\"UX Design\" href=\"https:\/\/www.centigrade.de\/en\/services\/ux-design\"><span class='mb-text'>UX Design<\/span><\/a><\/span>\n<p>&nbsp;<\/p>\n<p class=\"trademark\">Windows is a\u00a0trademark or registered trademark of Microsoft Corporation in the US and\/or other countries. Mac OS\u00a0is a trademark or registered trademark of Apple Inc. in the US and\/or other countries. Xerox\u00a0and 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.<\/p>\n","protected":false},"author":26,"featured_media":0,"template":"","tags":[164,368,369,153,33,24],"class_list":["post-5175","blog","type-blog","status-publish","hentry","tag-design-principles","tag-history","tag-perception","tag-typography","tag-user-interface-development","tag-visual-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/5175","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/users\/26"}],"version-history":[{"count":4,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/5175\/revisions"}],"predecessor-version":[{"id":11868,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/5175\/revisions\/11868"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/media?parent=5175"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/tags?post=5175"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}