$node-green #80bd01 on white background does not pass accessible contrast ratio

[jrit]

Currently standard links on the website appear in #80bd01 most often on a white background. Chrome accessibility tools indicate the contrast ratio is 2.28 and passing for AA level accessibility at the ~15px font-size on the API docs, like this page https://nodejs.org/api/fs.html would be a contrast ratio of ~3 which equates to a suggested #6ea400.

I personally think it is important that the website is properly accessible to everyone, but realize this creates some conflict between a Node brand color and what color combinations are accessible.

Please let me know if I can be of any assistance in resolving this, I felt it was premature to just open a PR suggesting a new color where it is a brand issue.

[stevemao]

Ref: #458

[phillipj]

I personally think it is important that the website is properly accessible to everyone, but realize this creates some conflict between a Node brand color and what color combinations are accessible.

Agreed. @mikeal who should we ping to double check if and which colours could be altered to increase accessibility, without violating brand rules?

[silverwind]

+1 to #6ea400, still looks acceptable to me.

[silverwind]

The new logo looks to be #669f64 in the JS part, @jrit can you check if this color meets the guidelines on the #fff background?

[jrit]

#669f64 does not for the expected font sizes because the required contrast ratio is 4.5:1 and that comes out to 3.13:1.

The dark green on the bottom left of the "o" in "node" is #3e863d which comes in at 4.49:1 which is functionally close enough, but to officially pass it would need to be pulled down to #3e853d

If anyone else wants to check these, this is the easiest place http://webaim.org/resources/contrastchecker/

[silverwind]

We have a new set of colors from a preliminary document for the new logo design: #215732, #44883e and #6cc24a. The first one would pass all tests on above site on #fff background, but I'd argue it's a bit too dark.

Maybe #44883e is the way to go, it passes WCAG AA for large text, but fails on small one.

[jrit]

The WCAG validation is supposed to set the floor for contrast, so on that basis it would have to be #215732 from those 3 colors to pass. #43853d is the lightest in the hue of #44883e that passes and I think that is also likely OK.

Unless there are objections to that, since the colors are documented now, a pull request seems appropriate to update this.