accessibility issue: gutter dots differentiated only by color

[SpadeAceman]

trafficstars

For users with color-deficient vision, the info/warning/error dot colors in the gutter can be very difficult to distinguish from one another, particularly in some UI themes. (Specifically, when I'm using ESLint and One Dark UI, the "warning" and "error" colors appear very similar to each other.)

One fundamental UI accessibility tenet is to avoid using only color to differentiate things. The best approach would be to use unique icons – emoji could serve well as icons in the gutter:

• ℹ️ Info
• ⚠️ Warning
• ⛔️ Error

At the very least, using different shapes for the colored gutter indicators (square = info, triangle = warning, circle = error) would allow myself and other colorblind users to better differentiate between them.

[steelbrain]

Hi @SpadeAceman

I thought about the same thing not long ago. Duplicate of https://github.com/steelbrain/linter-ui-default/issues/243 which proposes the same icons! :) Please subscribe to that issue

[SpadeAceman]

Aha, thanks! I'd looked through the existing issues but hadn't looked at that one, since it was talking only about the status bar and not the gutter dots.

[steelbrain]

The more I think about it, the more it feels like a separate issue. Thanks again for reporting this @SpadeAceman

[steelbrain]

Fixed by https://github.com/steelbrain/linter-ui-default/pull/300

[SpadeAceman]

The gutter dots are still differentiated only by color, leaving me unable to distinguish between them.

It looks like #300 only fixed the status bar display at the bottom, and didn't fix the gutter dots as per my original request.

Could you please reopen this issue? Thanks.

[skylize]

Mostly just a useless comment, but I'm gonna add it anyways:

This seems like a generally nice idea, even if you were totally ignoring accessibility.

Since apparently this is already on the radar for possible upgrades, the fact that it can make a tremendous usability difference for color-blind people should be enough to give it a fairly high priority.

[SpadeAceman]

After really digging into this, I've taken a stab at illustrating what I'm looking for. The screenshot below shows the warning and error characters I've arrived at which look good on my Windows work machine. (Note the overlapping symbols on line 52, which has both a warning and an error.)

Below is the code I hacked together and added to my styles.less file to accomplish this. The symbols I've chosen are easily distinguishable from one another by shape alone, regardless of color. (I've specified these characters both as they are, and using \#### designations, to sidestep any issues with encoding or copy/pasting.)

.linter-gutter.linter-gutter-error.icon::before {
  // content: "❌"; // appears as emoji here on Github
  content: "\274C"; // a big X, same character as above
}

.linter-gutter.linter-gutter-warning.icon::before {
  // content: "⚠️"; // appears as emoji here on Github
  content: "\26A0"; // warning triangle symbol, same character as above
}

.linter-gutter.linter-gutter-info.icon::before {
  // content: "ℹ️"; // appears as emoji here on Github, but doesn't look great in Atom under Windows
  // content: "\2139"; // same character as above
  // content: "ⓘ"; // this looks better in Atom under Windows
  content: "\24D8"; // circled lowercase i, same character as above
}

Note that I avoided the stop sign/octagon symbol for the error indicator, since at small sizes the stop sign is too similar to a circle (as is currently the case with the status bar symbols). The "X" is a more distinct and obvious error indicator.