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

Reduce lightness of low contrast nick colors to reach AA level of WCAG 2.0 #2282

Merged
merged 2 commits into from Mar 24, 2018

Conversation

astorije
Copy link
Member

I know this is going to make some people unhappy, but some of our nick colors were outrageously low-contrasted. Some of them were even very far from accessible color contrast guidelines.

So rather than doing it by ear (well, eye), which would be subjective and always upset someone, I went with something more objective:

  • I entered each color against this checker (on white background).
  • For each color that does not pass AA (i.e. contrast of < 4.5), I picked the HSL equivalent of that color, and reduced the Lightness until it reaches exactly 4.5.

That way, I keep the same Hue and Saturation, in order to keep colors as close to their original ones.
There will be values close to each others, some that people will dislike on their own nick, but I thought this would be the most fair way to get decent values.

Some before/after examples from the user list:

screen shot 2018-03-23 at 00 56 56screen shot 2018-03-23 at 00 57 04              screen shot 2018-03-23 at 00 57 44screen shot 2018-03-23 at 00 57 52

screen shot 2018-03-23 at 00 58 32screen shot 2018-03-23 at 00 58 40              screen shot 2018-03-23 at 00 59 38screen shot 2018-03-23 at 00 59 46

And if interested, the before/after on colors themselves (remember that effect of color on text is different than background, what seems fairly visible in background might actually be very difficult to see once on text):

screen shot 2018-03-23 at 01 17 35

If I ever need to generate this again

@astorije astorije added the Type: Feature Tickets that describe a desired feature or PRs that add them to the project. label Mar 23, 2018
@astorije astorije added this to the 3.0.0 milestone Mar 23, 2018
@astorije astorije added this to Todo in Accessibility via automation Mar 23, 2018
@astorije
Copy link
Member Author

@xPaw, updated Zenburn colors as well, overall very little difference with the theme prior to my changes, which is good. Before/After screenshots below.
I've also changed my method, using http://accessible-colors.com/ now, which outputs the same results than the tool mentioned above, except more convenient to use.

Are you still good with this?

I know I need to do that with Morning as well, but I'd like to change Morning to use our official colors first (very little difference with what's on master, but still) and cba to do it right now.

screen shot 2018-03-24 at 01 50 22screen shot 2018-03-24 at 01 50 32              screen shot 2018-03-24 at 01 50 45screen shot 2018-03-24 at 01 50 56

screen shot 2018-03-24 at 01 49 18

Updated snippet

Copy link
Member

@xPaw xPaw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still fine.

@astorije astorije merged commit d8eed4d into master Mar 24, 2018
Accessibility automation moved this from Todo to Done Mar 24, 2018
@astorije astorije deleted the astorije/accessible-nick-colors branch March 24, 2018 19:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Feature Tickets that describe a desired feature or PRs that add them to the project.
Projects
Accessibility
  
Done
Development

Successfully merging this pull request may close these issues.

None yet

2 participants