Repository navigation
Link color fails WCAG test for contrast #831
Description
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.
{{ message }}
Activity
GBKS commentedon May 25, 2022
Seems like a good candidate for the prefers-contrast media query.
GBKS commentedon May 27, 2022
So did a quick test with the link contrast checker, and I am not sure what to do here.
#F7931A, there is no body text color (on the greyscale) that actually passes the AA requirement.#474747, there is no lightness variation of the link color where both link-to-text and link-to-background requirements pass.#AC6206passes the link-to-background one, but not the link-to-body-text. This darker orange is pretty difficult to distinguish from the body text.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...
sbddesign commentedon May 27, 2022
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.
sbddesign commentedon May 27, 2022
Opened #833. Curious to get your take on this, @jason-me.
GBKS commentedon May 18, 2023
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.
GBKS commentedon Nov 15, 2023
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.