BitcoinDesign
Link color fails WCAG test for contrast
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.
So did a quick test with the link contrast checker, and I am not sure what to do here.
- With our link color of
#F7931A, there is no body text color (on the greyscale) that actually passes the AA requirement. - With our body text color of
#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...
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.
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:
For usability and accessibility, links should be underlined by default. Otherwise, link text must have at least 3:1 contrast with surrounding body text, and must present a non-color indicator (typically underline) on mouse hover and keyboard focus.
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.