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.

Sign up for GitHub

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

Jump to bottom

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

Open
1 task done
JoshuaKGoldberg opened this issue Nov 26, 2024 · 2 comments · May be fixed by #666 or eslint/eslint#19187
Open
1 task done

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

JoshuaKGoldberg opened this issue Nov 26, 2024 · 2 comments · May be fixed by #666 or eslint/eslint#19187
Labels
accepted bug Something isn't working

Comments

@JoshuaKGoldberg
Copy link
Contributor

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:

  • Foreground: #6E7F8E
  • Background: #F9FAFB

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

  • I am willing to submit a pull request for this issue.

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
@JoshuaKGoldberg JoshuaKGoldberg added bug Something isn't working repro:needed This issue should include a reproducible example labels Nov 26, 2024
@github-project-automation github-project-automation bot moved this to Needs Triage in Triage Nov 26, 2024
@nzakas
Copy link
Member

nzakas commented Nov 26, 2024

Go for it, just be sure we stick to our defined color palette grays for consistency:

eslint.org/src/assets/scss/tokens/themes.scss

Lines 4 to 14 in cb1dd45

--color-neutral-25: #fcfcfd;
--color-neutral-50: #f9fafb;
--color-neutral-100: #f2f4f7;
--color-neutral-200: #e4e7ec;
--color-neutral-300: #d0d5dd;
--color-neutral-400: #98a2b3;
--color-neutral-500: #667085;
--color-neutral-600: #475467;
--color-neutral-700: #344054;
--color-neutral-800: #1d2939;
--color-neutral-900: #101828;

@nzakas
Copy link
Member

nzakas commented Nov 26, 2024

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

@nzakas nzakas moved this from Needs Triage to Ready to Implement in Triage Nov 26, 2024
@nzakas nzakas added accepted and removed repro:needed This issue should include a reproducible example labels Nov 26, 2024
This was referenced Nov 27, 2024
Open
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
accepted bug Something isn't working
Projects
Triage
Status: Ready to Implement
Milestone
No milestone
2 participants
@nzakas @JoshuaKGoldberg