search

williamkapke / node-compat-table

node.green - Node.js ECMAScript compatibility tables
https://node.green
Other
858 stars 33 forks source link

Use accessible colors and contrast #59

Open jordanbtucker opened 5 years ago

jordanbtucker commented 5 years ago

The current colors and contrast pose a problem for people with color blindness.

Notice how the site looks for people with deuteranomaly and with protanomaly. It's difficult to visually determine the difference between supported (green) and not supported (red).

Using a modified version of a conservative 7-color palette for color blindness, I've come up with the following new look for node.green.

Here's how it looks for people with color blindness. Note the clear distinction between supported and not supported.

In addition to the obvious color changes, I've included changes to some font colors to achieve WCAG AAA contrast for all text.

Also, hovering over version numbers and help icons uses cursor: help instead of cursor: pointer.

Fixes #41, fixes #5, fixes #56

williamkapke commented 5 years ago

Thanks for tackling this! I really want this fixed.

What do you feel about the colors selected on the kangax compat table? The initial discussion was here: https://github.com/kangax/compat-table/issues/66

But it has since been updated to support multiple shades of green. I try to stay congruent with the discussions with that have happened there since I try to stay inline with that (upstream) project and far more people interact there.

Perhaps if they are needing improvements, suggestions can be continued there.

jordanbtucker commented 5 years ago

kangax is looking pretty bad for deuteranomaly. Just shades of yellow. What's worse, the shade of yellow gets darker as more tests pass, but if no tests pass, then it's an even darker yellow, so it's backward.

chrome_dg7pjk2dav

Protanomaly is only slightly better.

chrome_tqhx5wjd3s

Granted, my changes look mostly like shades of yellow too, but there's a clear distinction between supported and not supported.

If you don't want to merge the color changes, would you be willing the merge the contrast and cursor changes? If so, I can create a new PR for that.

williamkapke commented 5 years ago

would you be willing the merge the contrast and cursor changes?

yes- definitely!

For the colors- any chance you can open the conversation on the kangax repo? I just want to make sure there's broader feedback on it first.