Erica Sadun

Where technology meets something or other

Are you red-green color blind? How do you handle git color coding?

Git version control, whether at the GitHub site or at the command line is ostentatiously color-coded. How do red-green color blind users (a common issue for Engineers) deal with this? Any suggestions for discussing how to use the alerts and coding as in the following screenshots aimed at a potentially color blind audience? Thanks in advance!

Untracked and tracked files are color coded

Additions and deletions are color coded

Tweet this Post

7 Comments

  • I am not colorblind, but I imagine someone who is could use the Mac terminal’s settings to globally change either the red or the green color into some other color they can distinguish ?

  • Git diff colours can be configured: https://www.leaseweb.com/labs/2013/08/git-tip-beautiful-colored-and-readable-output/

    Also check git manual https://git-scm.com/docs/git-config look for colour.diff

    No idea about GitHub sorry

    • By Alex

  • For file status (added, removed, modified) check the colour.status slots (again, check git documentation).

    Also review the section on colour: you can specify by word for ANSI terminals (normal, black, etc), 0–255 for ANSI 256 colour mode and on some terminals you can use 24 bit RGB values #RRGGBB.

    Apple Terminal can handle RGB. Check your terminal with terminal-colors https://github.com/eikenb/terminal-colors

    HTH!

    • By Alex

  • I’m red-green colour blind and can tell the difference between the specific reds and greens show – usually the red is a bit darker and the green a bit more yellow which allows them to be distinguished. I’ve no idea if it’s as obvious as it would be to a non-colour-blind person!

    • By Ben

  • Color coding is not bad per se, rather it’s bad when it’s the only way to convey information. In your examples tracked and untracked files are explicitly labelled, and in diff added and deleted lines are marked with +- signs, so color-blind people can rely on that.

    That being said, I remember (and I’m not old!) using svn which didn’t use colors at all. When switched to git, which used colors in terminal, I remember thinking “wow, that’s nice!”.

  • I’m red-green colour blind. Like Ben said, I can tell the difference in these specific examples. It also helps when the colours are beside each other so I can compare them directly.

    In the terminal example, the first red text looks like it could be a dark green, especially with a thinner font on white like that. However the context (“untracked files”) and comparing it to the actual green later helps distinguish it.

    • By Jayson

  • For the GitHub stuff, I’ve had marginal success modifying the CSS live. If you can capture the pages with something like wget, convert all resources to local, and then edit the local CSS you’ll find the following styles in one of the CSS files (on the web it’s github-XXXXX.js where XXXXX is a bunch of random hex digits):


    .blob-code-addition {
    background-color: #ddddff // The background for the added code row
    }

    .blob-code-addition .x {
    color: #24292e; // The text colour for new text on a modified line
    background-color: #bbbbff // The background for new text on a modified line
    }

    .blob-num-addition { // Colours for the row number on the left
    background-color: #ccccff;
    border-color: #bef5cb
    }

    .blob-code-deletion { // deleted row
    background-color: #ffffdd
    }

    .blob-code-deletion .x { // deleted text on a modified row
    color: #24292e;
    background-color: #dfdf9f
    }

    .blob-num-deletion { // colours for the row number on the left
    background-color: #f6f6bb;
    border-color: #fdaeb7
    }

    HTH
    HAND

    • By Alex