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.


This is a companion discussion topic for the original blog entry at: http://www.codinghorror.com/blog/2005/07/code-colorizing-and-readability.html

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 :wink: 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.

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??

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)

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 :slight_smile:

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.

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

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?

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.

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… :wink:

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 :stuck_out_tongue:

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…

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.

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 :wink:

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”).

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.

“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.

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.

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

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

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

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.

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?

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…