Skip to content

[FEATURE] More accessible colors for branch badges #20

@theNestruo

Description

@theNestruo

1. Background

Branch badges in Git Graph Plus have muted colors. The currently checked out branch has a more vivid color. As a partially colorblind person, the muted colors make harder for me to tell one branch from another in dense graphs. The difference with the style of currently checked out branch makes harder for me to visually locate branches that are ancestors of the currently checked out branch.

For example, it is very hard for me to visually tell feature-colors and microsoft/main styles apart. And it is very hard for me to visually notice that colors and microsoft/main are ancestors of main, but feature-colors is not.

Image

(Note: probably not the best graph to illustrate the problem, but my personal repositories are usually lees problematic than work repositories I cannot share)

On a side note, tags seem to ignore the color of the commit they are tagging, which I found a little bit misleading (probably just because I was used otherwise):

Image

2. Proposed Solution

I don't think the root cause of the problem is the colors chosen (I can tell them apart in the graph even considering my colorblindness... at least for the first 8 or 10 branches), but with the fact that they are muted (badge badground) or too thin (badge border).

I have always found Git Graph branch decorators very easy to spot, because the decorator has a solid background of the vivid version of the color.

I don't have a proposed soultion; I'm not a designer and tend to do ugly things. Probably an accesibility setting to disable the muting of the colors (i.e.: use the same vivid colors for all branches, regardless it is the currenly checkedout branch or not) would be enough for me, would not affect other users, and it is not too disruptive with your current design. :)

Crude mockup (sorry):

Image

Maybe it would be too colorful in crowded graphs...

3. Affected Area

Check all that apply.

  • Commit graph (Graph View)
  • Commit details panel (Bottom Panel)
  • Sidebar (Branches / Remotes / Tags / Stashes / Worktrees)
  • Toolbar (Fetch / Pull / Push / Refresh)
  • Context menu
  • Search
  • Statistics view (Stats)
  • Activity Log
  • i18n (localization)
  • Git operations (new Git command support)
  • Other

4. Alternatives or References

Same graph as above in both Git Graph and Git Graph Plus for comparison:

Image

I can confidently tell that main, colors, and microsoft/main share the same color. :)

I think it is less noisy than my crude mockup because the colored part is limited to just the beginning of the badge.

Regarding the side note , here is an additional screenshot of Git Graph, using the same color of the commit in the graph for the tag badge:

Image

5. Additional Context (optional)

I know colorblindness is different from person to person, and it is really difficult for a non-colorblind person to know when the colors are too close and when they are not, so I'm open to evaluate any mockup before implementation, in order to reduce the amount of work. :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions