46

Most programmers have their own personal preferences for syntax-highlighting color schemes, but I've been wondering, has anyone ever done an actual scientific study on what the best color scheme would be? I imagine such a study would look at things like the readability of the code, whether the programmer's eyes are drawn to the most important parts, etc.

Perhaps this was already done for something like the default Visual Studio theme, but I'd like to know if there are any publicly available studies out there, and what they found.

2
  • I don't think anyone has specifically studied syntax coloring schemes, but principles from other fields still carry over. For example, the color red tends to draw attention.
    – Maxpm
    Jul 6, 2011 at 5:31
  • +1 I've been wondering the same or color schemes of applications and the OS actually.
    – stijn
    Jul 6, 2011 at 7:20

6 Answers 6

21

Specific color schemes cannot be objectively better than all other color schemes, their ranking would be individually subjective based on taste and cultural factors.

However, certain rules for readability / clarity, use in particular ambient light environments etc etc... are applicable, these would carry over from graphic design / typography, human computer interface and other related studies.

Ethan Schoonover's Solarized project is an interesting piece of work: http://ethanschoonover.com/solarized

2
  • It's possible to have an objectively best colour scheme, or at least group-subjective. When we say "best" we mean on average for the majority of a population or our sub-culture/population. All we require is some way of ordering items and answer clarification ('X is best given Y.'). Otherwise "best" loses meaning. There is also the real possibility of best colour-scheme generators, which take into account every individual quirk by scanning your brain (decades in the future).
    – AnnanFay
    Aug 26, 2015 at 13:57
  • @Annan: Doing it across a group by the average though tends to lead to an experience that is decidedly WORSE than even just mediocre for people toward the edges of the spectrum. Brain scanning... yes that would be nice but I foresee WW3 happening sooner than that. Sep 15, 2015 at 13:29
9

We recently did a user study on code presentations that are visually richer than syntax highlighting. While it is not quite a study on syntax highlighting schemes, you might find it insightful:

D. Asenov and O. Hilliges and P. Müller - The Effect of Richer Visualizations on Code Comprehension and here is the video of the 10 minute talk at CHI 2016.

We compared the standard Eclipse syntax highlighting to two richer presentations of code with visual extras such as:

  • Outlines instead of curly braces
  • Alternating background colors, instead of commas, for separating list elements
  • Icons instead of some keywords
  • Additional background colors for some statements and expressions

The study showed that increasing the visual variety of the presentation had a rather large effect on the speed with which developers could understand code structure - time was reduced by up to 75%. It's important to note that this is about simple questions regarding code structure (e.g. "Are there nested loops in the method?"). We didn't test tasks that require complex thinking (e.g. "What does this method do?"), since these are dominated by the person's skill rather than the effects of code presentation.

An interesting finding from our study is that we did not observe any visual overload due to the richer visualizations. Even though many participants said that they felt some visual overload or confusion, the data that we collected (time to provide an answer and whether it was correct) only showed improvement with richer visualizations.

With respect to syntax highlighting, our findings indirectly suggest that using more visual variety (e.g. more colors, and colors for more types of programming constructs) will be beneficial. E.g. a theme with a separate colors for built-in types, control-flow keywords, and the rest of the keywords, is likely to improve the understanding of code structure in some cases, compared to a plain theme that uses a single color for all keywords.

0
8

They only moderately recent study that is remotely related to the subject I know of is one from 2004: "The impact of web page text-background colour combinations on readability, retention, aesthetics and behavioural intention" by Hall & Hanna. However, it's not for the code but web pages and the only color scheme they consider is foreground and background colors.

I've asked question about studies related color schemes for programmers on Skepics.SE: "Are light-on-dark colour schemes for computer screens better for programmers?". It hasn't been answered in almost 2 years now, while normally that type of question get answered quite quickly there. Which leads me to believe that there are no such scientific studies.

3

I don't think such studies exist. In practice, when a company creates a new IDE, the syntax highlighting color scheme is based on the existent schemes of other IDEs.

For example, the default Visual Studio theme has nothing new nor original. Blue color was used for keywords for years, including by old Ada IDEs. Same thing for green comments. Some colors were more or less "new", like teal for the names of classes, but you can easily understand the reason behind the choice of those colors: it would be reasonable to set a color which is not far from blue (since those are pretty much like reserved words: Int32 for .NET, int for C#, etc.), but it must stay a basic color, distinct from the already used blue.

Now, what about alternative schemes, like the popular light text on dark background? They are not created by a scientist who studied the subject for years and made some complicated calculus to obtain the exact perfect match. Instead, a developer creates a scheme which is readable for him. He shares it on a website, and it becomes popular. That's all the magic.

Last thing: are there readability rules? Not too much.

  • For most part, it's something subjective: you can't argue that a blue keyword is more readable than a purple keyword, because somebody would be able to reply than for him, on his monitor, purple keyword is much more readable than the blue one.

  • For another part, it's just logical. A black-and-white scheme would not be as readable as the default one. In the same manner, you can't set keywords to be light yellow and comments to be light gray (let's say #eee) on a white background, because it's unreadable, and you don't even have to explain why. Those are the same rules when making a website or printing a book or whatsoever.

1

As a kind of rough study, the screenshots below show 3 color themes used to syntax highlight XSLT. I've chosen XSLT as it poses a particular challenge because of the large number of language elements - and also because many developers describe it as ugly.

Solarized

enter image description here

Tommorow Night

enter image description here

Github

enter image description here

Observations

The number of colors used in the sample helps distinguish the different language elements, but it might prove distracting to a developer.

It helps to progress from cold to warm colors if possible, using cold colors for the more neutral parts of the language. An alternative is to shift from pastel shades to more vivid ones (hue saturation).

The background color makes a huge difference to the perception of the foreground colors.

Some adjacent foreground colors can cause bad clashes that disturb the eye, red and green in particular do not seem to go well together.

With a dark background it is easier to provide a wide range of foreground colors with sufficient contrast with each other and the background.

Lastly, external factors such as ambient light and the quality and calibration of the monitor make a huge difference.

Conclusion

It is best to use tools that provide an extensible way of setting color themes as it is unlikely that any single color theme will meet the needs of all developers, and even the same developer may frequently change their preference depending on a variety of factors.

0

Well, I guess the first question will be whether or not the white background is such a great idea. Just because it comes close to real paper and we can find everywhere on the Internet these days doesn't necessarily make it a good (or may I say perfect) choice.

I remember that (many many) years ago we only had the yellow-on-black "colour scheme". And I also remember that it wasn't that bad. It didn't have that contrast as black&white. Not too long ago I learned that it is also better to the human eye.

Sometimes I really wonder who designs the colour schemes that, e.g. get shipped with operating systems. I usually ignore them, but I remember seeing really awesome mixtures of pink and green and whatnot. Well, I don't do drugs...

There are some studies about what colours do to your subconsciousness (calm down, cause aggressions, ...). I'm thinking that the commonly used colour schemes are somewhat based on that. Maybe they just added readability. Coding shouldn't be a suicide mission.

But as far as the colour scheme of current IDEs is concerned I'm fine with it. Let's face it: the simple idea behind it is to make it easier to find something that's different from the general "code noise". And to be honest I don't really care what colours they use to allow that. It just shouldn't hurt my eyes or burn parts of the code into the back of my head, like a glaring red on some tone of green.

Coding should be relaxing. And that's what it is to me.

Not the answer you're looking for? Browse other questions tagged or ask your own question.