Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use accessible colors and contrast #59

Open
wants to merge 1 commit into
base: gh-pages
Choose a base branch
from

Conversation

jordanbtucker
Copy link

@jordanbtucker jordanbtucker commented Feb 22, 2019

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
Copy link
Owner

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:
compat-table#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
Copy link
Author

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
Copy link
Owner

williamkapke commented Feb 22, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

cursor:pointer on header is misleading Fix colors for color blind users Font is illegible
2 participants