Tab With Problems - Improve Accessibility for Colorblind People

[titouandk]

After several years of using VSCode as a colorblind guy, I realised that tabs also change colors when the file has errors 😅

Tabs that have uncommitted changes are signaled with this text color:

Tabs with problems are signaled with this text color:

Those text colors are very similar for colorblind people.

Proposed solutions

• My favorite solution: Displaying a custom icon "⚠️" on the tab, instead of showing the file type icon (VueJS in our example).

Here is an example of the Problems tab icon when placed in the right sidebar (alongside copilot):

So this icon could be used as the file icon in the tab, when a file has problems:

• With bold text when there is an error.
• With colors that have a higher luminance gap between them. (That you could differentiate easily even if you applied a grayscale filter on your screen.)
• With a red bar instead of a blue bar on the top of the tab (this solution will probably not be enough on its own).

Short term mitigations

I moved the problem tab away for the bottom bar to the left sidebar.

Problems display on the bottom bar was very discreet (grey color for the tag, and away from the eyes at the bottom of the screen):

It is more obvious in the sidebar: