search

eslint / eslint.org

ESLint website
Apache License 2.0
78 stars 63 forks source link

Bug: Color contrast of code comments in light mode does not satisfy WCAG AA (accessibility) #665

Open JoshuaKGoldberg opened 4 days ago

JoshuaKGoldberg commented 4 days ago

URL(s)

Every URL with a code comment, such as https://eslint.org/blog/2024/10/code-review-nit-to-ecosystem-improvements.

What did you do?

I ran an aXe check via Chrome lighthouse on the ESLint site.

What did you expect to happen?

There should be zero WCAG AA violations.

What actually happened?

The only failure was on the colors of code comments:

As shown in https://webaim.org/resources/contrastchecker/?fcolor=6E7F8E&bcolor=F9FAFB, their contrast is 3.94:1. That does not satisfy WCAG 2.0 AA's minimum ratio of 4.5:1 for normal text.

Participation

Additional comments

I think the simplest solution would be to darken the code comments color. #697487 would produce a 4.51:1 contrast ratio per https://webaim.org/resources/contrastchecker/?fcolor=697487&bcolor=F9FAFB.

Before After
Before screenshot with #6E7F8E comments and line indicators Before screenshot with #697487 comments and line indicators
nzakas commented 4 days ago

Go for it, just be sure we stick to our defined color palette grays for consistency: https://github.com/eslint/eslint.org/blob/cb1dd45bd9f2a0f13615eafec8ff56e16dc6b857/src/assets/scss/tokens/themes.scss#L4-L14

nzakas commented 4 days ago

Note: You'd need to make this change separately on the docs site in the eslint repo.