I <3 Steve McConnell*
Coding Horror
programming and human factors
by Jeff Atwood

July 13, 2005

Code Colorizing and Readability

Most developers, myself included, are content with syntax coloring schemes that are fairly close to Visual Studio's default of black text on a white background. I'll occasionally encounter developers who prefer black backgrounds. And I've even seen developers who prefer the white on blue scheme popularized by DOS Wordperfect.

I vaguely recall reading somewhere that black on white was the most readable of all color schemes. I found two studies with actual data based on real-world tests with users:

  1. Color Test Results

    As you can see, the most readable color combination is black text on white background; overall, there is a stronger preference for any combination containing black. The two least readable combinations were red on green and fuchsia on blue. White on blue and red on yellow were ranked fairly high, while green on yellow and white on fuchsia were ranked fairly low. All others fell somewhere between these extremes. Also, in every color combination surveyed, the darker text on a lighter background was rated more readable than its inverse (e.g. blue text on white background ranked higher then white text on blue background).
  2. Readability Of Websites With Various Foreground/Background Color Combinations, Font Types And Word Styles

    From these results, one can say that contrast affects legibility, but unfortunately, it does not seem to be as simple as high contrast being better than low contrast. In the main experiment, Green on Yellow had the fastest RT's, and in the control experiment, medium gray, and dark gray had the fastest RT's. In neither experiment did the Black on White condition show the fastest RT's. These results show that these participants had faster response times when more median contrasts were used. These results supported Powell (1990), who suggested avoiding sharp contrasts, but did not fully support Rivlen et al (1990), who suggested maintaining high contrast.

    According to a manual by AT&T; (1989), the direction of the contrast (dark on light, or light on dark) might also affect legibility. When light text is placed on a dark background the text may seem to glow and become blurred; this is referred to as halation, and it may make the text harder to read. Some evidence for an effect of halation was found in the current experiment.

So, yes, there's definitely data to support the black on white status quo. After a quick trip into the Environment, Fonts and Colors section of the Visual Studio Options dialog, I captured these screenshots. Compare for yourself:

Visual Studio .NET, standard white background color scheme

Visual Studio .NET, black background color scheme

Visual Studio .NET, blue background color scheme

I'll take any of these schemes over the non-colorized Notepad version, but I feel very strongly that black on white color schemes are the way to go for overall readability.

Interestingly, this is also true of bibles.

Posted by Jeff Atwood    View blog reactions

 

« Gigabit Ethernet and Back of the Envelope Calculations A Tribute to the Windows 3.1 "Hot Dog Stand" Color Scheme »

 

Comments

Personally, I prefer black text on a slightly grey background (about #F0F0F0) or a pale blue (about #D0E0F0). The pure white background blaring out of a monitor can make the eyes pretty sore over time.

These very pale backgrounds are a lot easier on the eyes, and are usually very compatible with existing colour schemes (though the blue works better for gray comments)

Robert Watkins on July 14, 2005 07:36 AM

Hehe, this is a very personal and touchy subject.

Readability is definitly not the only factor when choosing colorizing schemes, eye-fatigueness is also something to consider.

The vs default background emits too much light IMHO, I therefore tend to use a black background scheme.

I even installed a simple addon called "VSStyler", to export my colorshemes to other machines or reset them back to default.
Here is the url:
http://geekswithblogs.net/jolson/archive/2004/02/14/2124.aspx

you SHOULD check out the picture :)

bonna on July 14, 2005 10:40 AM

In the course of developing my Zero Button Testing prototype, I decided to use background shade, line by line, to indicate correctness; this left the foreground text color available for conventional syntax coloring. I find it's quite effective and I suspect (without proof) that with well-chosen (pale pastel) colors it does not much harm readability.

http://c2.com/cgi/wiki?ZeroButtonTesting

I also experimented with ever-so-slightly darker shades of gray background to indicate nesting level; that was interesting - and had the potential benefit of promoting less complex methods - but ultimately I thought less successful.

http://onlysyntax.blogspot.com/2005/01/example-of-nest-shading.html

Carl Manaster on July 14, 2005 11:18 AM

> Hehe, this is a very personal and touchy subject.

True, if you're the only person ever reading the code, then definitely use whatever colors you like-- of course!

> Readability is definitly not the only factor when choosing colorizing schemes, eye-fatigueness is also something to consider.

Don't you think these are related, though?

Jeff Atwood on July 14, 2005 12:04 PM

I'm a light color on black person myself for code. I would not prefer this for the web or reading a book. I think the ubiquity of bright backgrounds everywhere else makes it easier on my eyes to see source code outlined against the black. The halation effect is really just the result of poor hardware. On worn-out monitors I have seen plenty of fuzzy black characters on white beackgrounds. But like ice cream (I'm vanilla!) I expect that people will find what works for them. A far more religious and divisive issue is formatting (which is retained when you share code!) Has someone produced a pretty printer for VS? The options in the interface are limited and limiting to say the least.

Terrier on July 14, 2005 12:33 PM

Jeff -

Visual Assist allows for some additional syntax highlighting in both the editor AND tooltips and additional code windows. Very nice; not brash.

Also, it does a nice job in assisting the under-assisted ;-) C# programmers in the VS editor by adding () and allowing for shortcut templates (somewhat like CodeRush but not as bulky IMO) to help out with property definitions and setting switch statements and {} etc. Nice bonus is it also works with HTML, VBSCript, JavaScript etc.

NOTE: I'm not affiliated with them, just a very happy user! And since you were on the subject of syntax highlighting, I couldn't help myself... ;-)

By the way, from your code examples, looks like you've completely moved out of the VB Ghettos and are living in the upscale C# burbs??

Leigh Kendall on July 14, 2005 01:13 PM

>> Hehe, this is a very personal and touchy subject.

>True, if you're the only person ever reading the code, then definitely use whatever colors you like-- of course!

I consider myself the only person who will read my code on my desktop machine. When someone else wants to read code on my screen he has to realise that the desktop is setup the way I like it. That also goes for keyboard (I type querty in an azerty country), mouse (max. speed settings), resolution... settings.
I'd rather have my collegues or boss complain about how uncomfortable my settings are than working with settings that are uncomfortable to me, caus I have to look at them the whole day.

That's why it touchy btw... ;)

>> Readability is definitly not the only factor when choosing colorizing schemes, eye-fatigueness is also something to consider.

>Don't you think these are related, though?

I think readability is how crisp the font looks like against its background and is immediatly noticable, while fatigueness occurs after looking at the screen for hours.

I agree that black on white is more "readable", The difference however is neglectable when considering the additional straint on the eyes after several hours.

So, the more hours one spends programming, the darker the desktop should be :p

bonna on July 15, 2005 05:18 AM

The last picture doesn't look too bad for me, but that's probably because it looks similar to the Turbo Pascal IDE that I started on, a very long time ago...

Matt Galaviz on July 15, 2005 11:25 AM

I'm with Robert on the pale backgrounds. I use EAECDD (234 / 236 / 221) on my work computer, and a pale blue at home. The contrast is still there, but it's a little easier on the eyes than pure white. Plus it looks cool.

Jon Galloway on July 18, 2005 01:06 PM

I think that the font size and screen resolution you choose has a big role in readability, vis-a-vis color schemes. If the screenshots that you posted had 14 pt. Lucida Console as the font, running at 1600 x 1200, you'd be asking an entirely different question.

Burton on July 20, 2005 02:40 AM

Just stumbled upon this blog and I'm loving it...

Anyway, I'm a developer from the Old School of Borland. Every single coding environment just HAS to be in the Borland style, much like the last screenshot. Much like, but not quite - it's messed up. Normal text should be yellow, and private words should be white, as well as various symbols. Numbers and strings have no option other than being cyan. As for comments, a lighter gray is better.

This doesn't hold for the web, though. I couldn't stand it - dark text on a white background is the best for such a presentation, but when you're doing serious, long-houred coding, the white will KILL your eyesight.

Matt on August 18, 2005 05:19 AM

> Much like, but not quite - it's messed up

Thanks for the reminder! I couldn't remember what this looked like.. it's been a while since I did any Turbo Pascal ;)

Jeff Atwood on August 18, 2005 12:38 PM

Believe it or not, I *still* code in Borland Pascal sometimes when I need something done fast. In time VS starts and I click around, do this, do that, set up a nice and lovely namespace, I already have a working prototype in DOS :))

I don't know why, but VS just forces me to write organized code. I can't, *CAN'T* write procedural hacky code in it. No way. I have to have classes, and they all need to be XML-documented. The other day, I just wanted to auto-rename some files by appending a fixed-format date on them, and I ended up with 150 lines of code in VS before finally telling myself I'm an idiot. Argh!

BTW, I've just reached 2004-09 in your archives. Still plenty more to go, much to my boss' delight ("yes, yes, I'm working hard on it, but it's extremely complicated").

Matt on August 19, 2005 05:28 AM

My apologies if there is a separate blog entry for fonts. But I always change my font in any code editor to FixedSys. It is so much easier on the eyes. The only reason I could see for preferring CourierNew to this is to save a bit of space, but with the size of monitors nowadays, that shouldn't be a consideration. I'm surprised more people haven't discovered this little trick.

Jimmy on August 28, 2005 08:53 PM

"Personally, I prefer black text on a slightly grey background (about #F0F0F0) or a pale blue (about #D0E0F0). The pure white background blaring out of a monitor can make the eyes pretty sore over time."

An alternative solution to this problem is to calibrate the monitor, rather than having an arbitrary setting (which is, more often than not, too high gamma, too high contrast and too high brightness).

A properly calibrated monitor will display white without glow, glare, or eyestrain. Even so, a properly calibrated monitor will not make white on black more readable, as the halo effect will still apply. It will make black on white more like a natural printed paper page.

Although calibration is normally the domain of photographic specialists and graphic artists, it is good for programmers as well for two reasons - 1) it is much easier on the eyes for the many hours spent staring at a screen, and 2) it ensures you are creating interfaces that look right at a measurable standard setting which is suitable for the majority of users (eg: if your monitor has too high a contrast, and you create an interface on it, it will appear washed out and may even lose some visible elements on another display that is more accurate).

Of course, I am not suggesting you buy calibration equipment, but picking up some test patterns from photographic websites and running with them is free, quick and easy.

As an aside, note that the most unreadble combinations mentioned are complimentary colours. These create a shifting shimmering psuedo-3D effect which is most disconcerting, which, some research indicates, may be the way in which normal sighted individuals can experience dyslexia firsthand.

Paul Coddington on October 3, 2005 10:27 PM

Although black-on-white is great for paper and easily readable, it is horrible on a CRT or other display.

I cannot imagine why so many people hurt their eyes staring at a very bright fully-on light source to read the dark spots on it.

Light on dark is so much easier on your eyes. Although it might not be as readable for a five-minute readability test, my 40+ hour/week test shows light-on-dark as a clear winner for total overall readability. When I have to work on the data with black-on-white, such as many web pages, my eyes start to buzz with annoyance after a half hour.

Even this web site with light gray on full-bright white is moderately annoying after a few minutes.

bryanw on March 16, 2006 12:14 PM

Me, Myself & I likes the code more in these colors:

http://img151.imageshack.us/img151/4589/unbenanntho0.gif

Karsten on September 25, 2006 01:18 AM

I always use black background, as at the picture.
Unfortunately, Visual Studio 2005 does not work correctly with it (see the green rectangles with invisible black text)

http://img473.imageshack.us/img473/8043/vsbwq8.gif

Nood on February 19, 2007 10:54 PM

Jeff - did you actually read the second study? It most definitely does not support the black on white status quo.

In the paper's first colour combination experiment, the authors were forced to conclude 'that there is no one font or one color combination to use, but rather there are certain fonts that work better with certain color combinations.' Green on yellow was found to be easily as readible as black on white. Black on grey performed better (though not statistically so) than black on white for TNR and Courier New fonts. The second grey versus black experiment found that medium grey/white then dark grey/white were both more readable than black/white.

The success of green on yellow in the main experiment shows just how wildly inaccurate the preliminary online survey was. The format of the survey, requiring one to look at all types of strongly contrasting colours up against each other, with a bonus bright-white border for those using higher resolutions, was very poorly chosen.

As for the dark on light vs. light on dark debate. When the authors say 'Some evidence for an effect of halation was found in the current experiment', they have inferred this from comparing white on blue & yellow on blue with black on white and green on yellow. This is comparing apples with oranges, which is why they say, 'more research is needed on this topic before any strong recommendations can be made'. To resolve the black on white vs white on black question one must examine just that. Though it probably should be the grey on black vs black on grey question now. Or any of the other attractive colour combinations the authors left out of their study.

Todd on April 30, 2007 08:20 PM

Here's a question for all you guys: How do I change the background colors in VS2005 for the solution explorer, properties, dynamic help, etc. windows?

Evan M. on October 11, 2007 11:40 AM

I think dark text on light background makes text coloring harder, probably because dark colors are less differentiable and drowned by luminosity of larger light background.

I found rich color syntaxing easier in light text on dark background schemes.

But as said color schemes depends on user, usage, font, display, environment...

Musaran on December 8, 2007 01:34 PM

Ever try to read the wattage of a light bulb that's turned on? Yes, it can be done, but it's not easily done. That's what you're trying to do with black characters on a white background.

Try this simple experiment. Have someone look at your pupils when you are viewing code with 1) black chars on white background, 2) white chars on a black background. Discuss this experiment with your eye doctor.

Next experiment. Try white chars on a black background for a week. Then try to go back to black chars on a white background. It's a very eye opening experiment!!!!

Bret on January 24, 2008 06:29 PM

the problem with the provided sample is that the light text on dark background takes up a tiny square on my monitor and then it's surrounded by a bunch of white causing a halo effect where it's hard to read. If the whole page was black with light colors it would be far superior.

Tyler on January 28, 2008 03:40 PM







(hear it spoken)


(no HTML)




Content (c) 2008 Jeff Atwood. Logo image used with permission of the author. (c) 1993 Steven C. McConnell. All Rights Reserved.