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

Link color fails WCAG test for contrast #831

Closed
sbddesign opened this issue May 25, 2022 · 6 comments
Closed

Link color fails WCAG test for contrast #831

sbddesign opened this issue May 25, 2022 · 6 comments
Assignees
Labels
Accessibility Issues relating to accessibility.

Comments

@sbddesign
Copy link
Collaborator

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.

@sbddesign sbddesign added the Accessibility Issues relating to accessibility. label May 25, 2022
@GBKS
Copy link
Contributor

GBKS commented May 25, 2022

Seems like a good candidate for the prefers-contrast media query.

@GBKS
Copy link
Contributor

GBKS commented May 27, 2022

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. #AC6206 passes 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
Copy link
Collaborator Author

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.

@sbddesign
Copy link
Collaborator Author

Opened #833. Curious to get your take on this, @jason-me.

@GBKS
Copy link
Contributor

GBKS commented 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
Copy link
Contributor

GBKS commented 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.

@GBKS GBKS closed this as completed Nov 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accessibility Issues relating to accessibility.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants