4

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?

3
  • It would be really nice to see a simple and clear answer to the original question: How to change the red and green colors of (git) diff so as to make diff's output readable on, say, a Microsoft Windows Command Prompt window having black background? Dark red text on black background is an almost invisible combination. Please, let's try to refrain from philosophical discussions. Jul 19, 2022 at 1:01
  • 1
    This is probably the article you were looking for: jameshfisher.com/2014/05/11/your-syntax-highlighter-is-wrong
    – abaumg
    Aug 18, 2022 at 14:08
  • 1
    Thanks, this is the article I was looking for. :) Aug 24, 2022 at 16:08

3 Answers 3

6

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.

1
  • Love the examples and love the explanation
    – Devin
    Aug 5, 2017 at 15:57
6

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.

3
  • 3
    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. Aug 5, 2017 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, 2017 at 21:42
  • I partly disagree, for most people there is connotation. True that "red" not always means bad but it usually mean attention/caution mostly used to prevent bad consequences i.e the Stop signal, traffic light or a risk matrix. Whereas "green" many times is used as success or no risk, i.e light at pedestrian crosswalk. So if the colors has nothing to indicate i will use other without deep mind association. Feb 22, 2022 at 10:38
0

Short, practical answer (since I was asked about it in a comment):

In Git

Open ~/.gitconfig and add

[color "diff"]
old = yellow
new = blue

See git --help config for details.

In GitLab

Go to your profile preferences and scroll down to Diff colors. You can select between yellow, blue, red and green or enter your own color.

In GitHub

¯\(ツ)

4
  • This stackexchange is not about implementation. I appreciate your effort, but this is not what the OP was asking about.
    – Nash
    Jul 20, 2022 at 11:32
  • I am the OP and some commenter asked for specific settings. :) Jul 21, 2022 at 16:51
  • 1
    I see :D This explains why your answer feels a bit out of place.
    – Nash
    Jul 22, 2022 at 5:30
  • Personal anecdote, I have deuteranomaly: I think Github's diffs are just fine.
    – Oskar Skog
    Aug 9, 2022 at 18:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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