Code Colorizing and Readability

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

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.

I’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.

I’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).

What 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
/

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

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.

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.

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

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

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