Link Underline Success Criteria / Best Practices

Question

I'm trying to get clarification on contrast required for html link underline color. I'm using the Wave tool to check for issues and I've encountered something that, intuitively, should produce an error but does not.

If I use the css property text-decoration-color on an HTML A (link) element and make the link color: black;, I can use any text-decoration-color and it passes contrast ratio for any color on WAVE tool. This includes contrast compliance with a text-decoration-color: white;.

This is a code example with white underline and black text.

a
    {
                color: black;
                text-decoration: underline;
                text-decoration-color: #ffffff;
                -webkit-text-decoration-color: #ffffff;
                text-decoration-thickness: 2px;
                text-underline-offset: 4px;
    }

Below is an example of a link-underline-color which fails regular contrast ratio.

a
        {
            color: black;
            text-decoration: underline;
            text-decoration-color: #FAFAFA;
            -webkit-text-decoration-color: #FAFAFA;
            text-decoration-thickness: 2px;
            text-underline-offset: 4px;
        }

I have read some documentation on this and I could find a page on MDN which states

"It is important to ensure that the contrast ratio between the color of the text, the background the text is placed over, and the text decoration line is high enough that people experiencing low vision conditions will be able to read the content of the page."

So my question... does the WAVE tool not sufficiently test for link-underline-color or is any color sufficient?

Answer 1

You have three success criteria that come into play here:

• WCAG 1.4.1 Use of Color
• WCAG 1.4.3 Contrast (Minimum)
• WCAG 1.4.11 Non-text Contrast

If your link is embedded in a paragraph and if your links do not have an underline or any other visual clue (such as bold or italic font) to distinguish them from the rest of the text in the paragraph, then that would violate WAG 1.4.1. One way around 1.4.1 is to make sure the link text has at least a 3:1 contrast with the surrounding paragraph text and that the link changes it's appearance (underline, formatting change, font size change, etc) when it receives focus or mouse hover. See G183.

1.4.3 says that your text color and your background color must have a least a 4.5:1 contrast ratio (unless it's "large" text, in which case it can be 3:1).

But with your underline, just by itself, that's not considered "text" so WCAG 1.4.3 does not apply but WCAG 1.4.11 would apply. The underline is considered "visual information required to identify [the] user interface component". The color of the underline compared to adjacent colors must be 3:1. So if you have a light gray underline on a white background, then user's won't be able to tell it's a link and it would fail 1.4.11. The color of the link text itself is irrelevant to 1.4.11 (but is relevant to 1.4.3 and 1.4.1).

As far as whether an accessibility scanning tool will catch that is unknown. But if you know the principles behind these three guidelines, you should be good.