2

I once read an article arguing that red and green are bad choices for diff, because

  • some people have red-green color blindness
  • red implies "bad" and green implies "good", but deleted code is often not bad and new code is also not always good.

However, I cannot remember where I found that article and which alternative colors were suggested.

What would be sensible alternative colors for red/green?

5

Red and green has a certain logic to it, in the sense that Western culture does associate green with “positive” states and red with “negative” states. In this sense, red is appropriate for deleted code because it is believed to be less correct than the replaced code (otherwise, it wouldn’t have been deleted; remember the teacher’s red marks on your paper). Deleted code is also negative in the sense that it isn’t run –it’s “stopped,” while the (green) replacement code “goes.” (without the original article I can’t judge the merits of its argument; maybe someone was traumatize by an over-zealous teacher).

However, the accessibility (color-blindness) concerns are legitimate. The usual ways of dealing with this, assuming color coding is the right choice in the first place, is to add a redundant code.

You could, for example, and add strikethrough to make it clear what’s deleted:

![Red deleted text with strikethrough, normal text green

However, that also makes the deleted text harder to read, so if the task involves really studying the deleted text, it’s not a good choice.

A common choice is to go with shade coding. With a white background, you can go with a very dark green (okay, almost black) and keep all text minimally legible (and nonpink):

!["Green" is 0, 57, 40. "Red" is 239, 0, 0

The above shades contrast 3.0 against each other and at least 4.5 with the background, which is the minimum you want, and also about the most you can get.

The deleted text will appear lighter than the replacement text, helpful to not only those who are color blind but also for those who use non-color printouts (the default at my work). It seems sensible for deleted code to be lighter, as if it isn’t there as much as the replacement text.

If for any reason you want to avoid negative/positive connotations, I’d recommend a brown-blue combination:

!["Blue" is 0, 0, 100. "Brown" is 185, 95, 0.

These have no particular strong associations in Western culture, and blue-yellow color blindness (and total color blindness) is much rarer than red-green, so more people will benefit from the color coding. I also made the deleted code a lighter shade than the replacement to have shade coding too.

  • Love the examples and love the explanation – Devin Aug 5 '17 at 15:57
5

The direct answer to your question is completely opinion based, so I'll ignore it. Instead...

To arbitrarily pick two different colors would go against a well established standard. By not maintaining consistency with those standards you increase the learning requirements of your application and increase the potential for confusion. Which makes doing such a thing a really bad idea.

"Because color blindness" is a reason often provided by people who do not understand color blindness. Color blindness...

  • does not necessarily mean you can't see a particular color (red / green)
  • does not necessarily mean you can't distinguish between two colors (red vs. green)
  • does not present itself the same between two different people

While it is important to take such conditions into consideration, it is important to understand how such conditions work.

Red does not imply bad, nor does green imply good. You can't just take a color's meaning from one context and and move it to another.

  • Red means stop at a stop sign. Stop signs are not bad.
  • Strawberries are not bad.
  • Red (stop) and green (go) lights are not bad and good.
  • Green means starboard and red means port on nautical ship - neither of which is "good" or "bad".
  • Elmo is not inherently bad, nor is Oscar inherently good.

So... What are good colors for deleted and added code in a diff program? Red and green, respectively, with a user option to change it.

  • 2
    Although there is some truth to this, the most common forms of color blindness, which limit confidence in differentiating red and green, can be combatted by moving red towards orange and green towards cyan. It can also help to tie them to a different value chords, generally red-orange with more major and green-cyan with more minor (which is supported by their relative natural positions). The reason that these solutions are not "standard" isn't because they aren't effective (they are), but because even greater gains can be made by forgoing color as a required signifier entirely. – Nathan Christie Aug 5 '17 at 3:53
  • 1
    This answer is a fun good read but I resist to upvote as it does not answer how to improve the often badly colored (and often more) UX of a diff tool. – JOG Aug 5 '17 at 21:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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