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

Color Contrast Issues #154

Open
bbsmooth opened this issue Jun 3, 2024 · 2 comments
Open

Color Contrast Issues #154

bbsmooth opened this issue Jun 3, 2024 · 2 comments

Comments

@bbsmooth
Copy link

bbsmooth commented Jun 3, 2024

Not sure if you are ready for accessibility issues?

Describe the bug
There are a few color contrast issues that do not meet WCAG mininum contrast requirements:

  • This is very very very picky, but technically, in light mode, the contrast difference between the link text color (#3D50F5) and the non-link text color (#1B1B32) is only 2.93:1 and WCAG requires at least 3:1 if you are only going to use color to differentiate links. Yes, I feel silly pointing out such a small discrepancy, but there are people who like to run automated tools on your site and point out these issues, so it's probably best to just fix them.
  • In light mode, there is a light purple Note box that has a link in it. The contrast between this link color and the non-link text is only 1.31:1, so I don't feel so silly pointing this one out.
  • In dark mode, the contrast between link (#B3C7FF) and non-link text (#F5F6F7) is only 1.54:1 (again, it needs to be at least 3:1). In the Note box the contrast is slightly better (1.69:1) but still well below the required minimum of 3:1.

On a side note, you can do away with the 3:1 contrast requirement for link vs non-link text by using another method for distinguishing these links, such as underlining them. But if color is going to be the only way to distinguish the links, then they must have at least a 3:1 contrast with the surrounding text.

@bbsmooth
Copy link
Author

bbsmooth commented Jun 3, 2024

OK, this is weird. I tested this in another version of Firefox and the non-link text in light mode is now showing as #000, which does give it more than a 3:1 contrast with the link text. Not sure what is going on here, but if the default text color is really black then you can ignore my first bullet point above. But the other two bullet points are still there.

Update: Oh wow, now even this Firefox has suddenly switched back to having the default text as #1B1B32 instead of pure black and bullet point one is valid again.

Second update: I figured it out. When you first view the page in light mode, the default text color is pure black. But if you use the toggle to switch to dark mode and then switch back to light mode, you get the #1B1B32 color instead. So I think all three bullet points above are valid.

@a2937
Copy link
Member

a2937 commented Jun 10, 2024

I wanna try to match the legacy colors as much as I reasonably can. Do you have some suggestions for colors I can use? I could probably combine it with the PR I made to resolve dark theme.

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

No branches or pull requests

2 participants