programming and human factors
by Jeff Atwood
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:
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).
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:
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.
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 2:13 AMPersonally, 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 8:36 AMHehe, 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 11:40 AMIn 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.
a href="http://c2.com/cgi/wiki?ZeroButtonTesting"http://c2.com/cgi/wiki?ZeroButtonTesting/a
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.
a href="http://onlysyntax.blogspot.com/2005/01/example-of-nest-shading.html"http://onlysyntax.blogspot.com/2005/01/example-of-nest-shading.html/a
Carl Manaster on July 14, 2005 12:18 PMHehe, 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?
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 1:33 PMHehe, 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 6:18 AMThe 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 12:25 PMJust 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 6:19 AMMuch 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 1:38 PMBelieve 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 6:28 AMMy 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 9:53 AM"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 11:27 AMAlthough 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.
Me, Myself I likes the code more in these colors:
http://img151.imageshack.us/img151/4589/unbenanntho0.gif
Karsten on September 25, 2006 2:18 AMI 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 AMJeff - 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 9:20 AMHere'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 12:40 PMI 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 1:34 AMEver 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 6:29 AMthe 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 3:40 AMI've explained at http://www.43things.com/people/progress/dandv/9958400 why I think inverted color schemes are less readable.
After two years of working as a translator in MS Word 8 hours a day, it was WAY easier on my eyes to have a gray background and black text, than a BRIGHT WHITE background and dark text.
Dan Dascalescu on October 28, 2008 4:08 AMI've read on an eye-care website (I forget where) that the optimal setup is to have the text be 10 times brighter than the background. Not sure how you would measure that... (Oh, and your environment or work area should be 3 times brighter than your screen, but you should not be facing a window, and you should not have any direct glare on the screen, and you should not be facing a wall but an open area so your eyes detect depth).
Alex on December 5, 2008 8:30 AMWhat I find wierd is that nobody has mentioned some of the most important factors to do with font readability.
- Cleartype / anti aliasing
- Fixed Width / Monotype
I know I'm a non standard dev as I always favour a non-fixed width Cleartype font, which course problems where anybody has flower-boxed, or otherwise space aligned code. (i.e. Jeff has the textbox still in fixed width so I can type
/-------\
| Hello |
\-------/
But that will look a mess as you read it)
Fortunately however those forms of alignment seem to have lost favour in the development world.
PS. Does anybody else here ever read FontBlog? http://blogs.msdn.com/fontblog/archive/2008/07/16/cleartype-improves-the-efficiency-of-typical-office-tasks.aspx
AlSki on April 16, 2009 4:48 AMI'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 February 6, 2010 9:30 PMI 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 February 6, 2010 9:30 PMMany of my work colleagues a few years ago used the 'twilight' white on black theme in Delphi and I thought they were crazy. Then I tried it myself and perceived less eye-strain. When I switched to C# I muddled around trying to get my own light on black settings until I found the 'vibrant Jedi' theme. I still had to tweak it a bit, but orange/yellow/blue on black worked fantastically for me, either using Droid Sans Mono or Deja Vu Sans Mono. I'm still experimenting with Xcode highlighting. The highlighting has to reflect the proportion of text that is reserved/named identifiers/etc. And objc is quite different from c# that way.
But for me, it wasn't just about eye-strain, it was also for colour-coding my thought processes. Orange on black meant I was working on code. Though I was never able to get notepad++ or jedit to do light text on a dark background.
John Ferguson on February 6, 2010 9:30 PMI agree with you that black on white is much more readable, normally, but in your examples the colored on black was much more readable than the colored on white. It might have to do with the huge chunk of black being next to it but I found I had to focus for a moment to see the colored on white but the colored on black was instantly seen.
Pickle Pumpers on August 5, 2010 9:17 AMWell a black background allows to use flashy colors for highlighting, which I prefer to better differentiate keyword and syntax. The thing I don't like with the black background is that dark colors are by fact nearer to the black, which kinda make them harder to differentiate.
For the grey, I think it is a good compromise, but I just think it is near to all colors.
I don't really think the brain or the eye are made for either of those pattern: you also have to consider people read white paper, which is a passive source of light, unlike a screen.
If someone just liked the dark background, maybe it can begin to be an habit, and maybe the brain gets used to it, unlike the people who have got tested by the scientist. And don't forget there are font render system like the Apple one which are totally not made to smooth font with a black background.
But that's just a matter of preference. I think the most important thing about code highlighting is how the syntax is highlighted with a lot of different colors. Highlighting types and instructions with the same color is useless and is worsw than no syntax highlighting at all.
I'm gonna adapt my color preferences to a new white background theme.
Of course don't compare reading human text and source code, it's two very different languages: white background is better for plain text.
By the way here is an interesting application: highlight human language grammar: verbs, subjects, objects, misc words etc. would be fun. I wonder if people like Chomsky thought of it.
Qokoon on November 17, 2010 11:36 AMThe comments to this entry are closed.
Subscribe in a reader
Subscribe via email
|
|
Traffic Stats |
