-
Notifications
You must be signed in to change notification settings - Fork 97
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
Link color fails WCAG test for contrast #831
Comments
Seems like a good candidate for the prefers-contrast media query. |
So did a quick test with the link contrast checker, and I am not sure what to do here.
The only solution to this I can think of is that we sacrifice the link-to-body-text ratio for the high-contrast mode, and make all links underlined. Rationale being that the viewer needs the strong contrast from the background in order to make out the text. Then, to distinguish text from links, the underline becomes the visual signal. I assume that's the way to go, since the link and text colors on the page of this testing tool also don't have sufficient contrast to each other. Hope someone has a better answer to this... |
That's not entirely accurate. Their link-to-background ratio is very good (9.84:1, where a 4.5:1 is required for normal text for WCAG AA). While their link color only has a 1.28:1 contrast against the body text, it is underlined. They say:
Therefore, their link colors pass because it it meets the necessary minimum text contrast requirements AND it is underlined to help it stand out from the body text. In other words, their link color contrast ratio is ONLY for situations in which color is the only differentiating factor between the link and the body text. I'm about to submit a PR so we can start looking at this. |
I looked at this again for accessibility awareness day, since someone had asked about this topic in the session this morning. It's a proof-of-concept that uses CSS variables and a media-query to neatly switch to a darker orange when the user enabled increase contrast in their OS accessibility settings. Here's the draft PR. Not a problem we have with our site, but this technique should also work well for situations with light and dark modes, and you want to enable increased contrast for both modes. |
Going to close this conversation as we merged an improvement to contrast handling with #1015 in September. For any follow-ups, please create a new issue based on the latest site code/design. |
When I was testing the a11y improvements in #770, I realized that the color we are using for links (
#F7931A
) fails to meet WCAG color contrast spec. Test it here.The text was updated successfully, but these errors were encountered: