microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
162.42k stars 28.62k forks source link

Consider using better contrasting colors than red and green #226795

Open Tyriar opened 2 weeks ago

Tyriar commented 2 weeks ago

Testing #226648

I mentioned red, green, yellow in https://github.com/microsoft/vscode/issues/226792 which should probably be associated with their meaning. Even if they're renamed, consider not using red and green in areas where contrast is important as red/green color blindness is very common.

image

Tyriar commented 2 weeks ago

Especially on HC light, I can barely tell these apart:

Screenshot 2024-08-27 at 10 36 02 AM
lszomoru commented 4 days ago

@daviddossett, do you have bandwidth this milestone to review the graph theme colors and add some more? Thanks!

daviddossett commented 4 days ago

I doubt colors will be enough here. I think differentiating with stroke patterns (dotted, dashed, etc.) is probably a more reliable way for HC users to distinguish.

Tyriar commented 4 days ago

@daviddossett even if we had different patterns, that would probably be to help differentiate the "main colors" (eg. local, origin), the problem here is that 2 of the colors in the "other" branches set of colors are very difficult to distinguish and use red+green which is a no no generally. I don't think we can achieve full a11y fallback here so this is just about making the color contrast a little less bad.

Tyriar commented 4 days ago

To clarify, there are 6 colors currently, the bottom three below are the "main" ones:

Image Image

lszomoru commented 3 days ago

I will play around with this tomorrow but if you have explicit suggestions on which colors from the VS Code color palette we should use please let me now. I would also like to expand the color registry used by the graph to probably include 3 more colors. Opened to suggestions.

Image