3

my question is specifically about the hover color of a underlined link and the required contrast ratio to fulfill AA. I'm asking myself if it has to have at least a contrast ratio of 4.5:1 on hover to pass AA or if the exception from 1.4.1 (links surrounded by text only need to have 3:1 if an underline/something else is added on hover) is also valid here because the underline is already there, not only added on hover? So does the lower threshold of 3:1 also apply to hovered links that already have an underline? Theoretically it has to in my opinion, because they are allowing a low contrast ratio for non-underlined links already.

In general, link text has to be at least 4.5:1 on hover for AA, am I right?

Improve this question

3 Answers 3

Reset to default
0

3:1 contrast in 1.4.1 you mentioned is the contrast between link's text colour and normal text colour. In AA level of WCAG contrast between text colour and background colour must always be 4.5:1 or higher, regardless if the text is underlined or not.

In sufficient techniques for 1.4.1 there is a good example in technique G183 showing how to create links that has contrast of 3:1 to normal text while still retaining contrast of 4.5:1 to background.

You need to note though that cases in the example are the ones where there is no underline visible by default and colour is used as the only mean to tell that links are links. But in all cases in the example, contrast between text (link or not) and background is still always 4.5:1.

So you are correct, link text has to have contrast of 4.5:1 to background, all texts have. It is irrelevant if there is a hover active or not. If the underline is visible all the time, then 1.4.1 is irrelevant as well, as colour is not used as the only mean to distinguish links from normal text. In those cases contrast between link colour and normal text colour can be anything but contrast to background must still be 4.5:1.

Improve this answer
2
  • 1
    Thank you so much for your answer! ☺️ I see, then I understood it wrong. I thought that the contrast ratio can be lower in contrast to the background color. Commented Mar 21 at 9:09
  • No problem, glad I could help. Remember to accept the answer if you think it was useful. Commented Mar 21 at 9:50
0

Speaking as a colour blind person I'm thankful for underlined links (obvious navigation elements being an exception). I still find it useful to have a noticable colour change on hover and focus as a visual indicator.

Improve this answer
0

As long as the underlining remains visible and helps in identifying it as a link, a link that is already underlined only needs a 3:1 contrast ratio, even when hovered. Only when there is no additional style (such as an underlining) to indicate that it is a link is the 4.5:1 contrast ratio necessary. However, even when the color changes when hovered over, 3:1 is sufficient provided the underline is always present.

Therefore, if the underlining is already there and doesn't go away, the lower 3:1 ratio does indeed apply when hovering. You're correct to believe that links that are obviously designed as links are exempt from this rule under WCAG.

To put it briefly:

  • Links that are underlined (before and after hover): require a 3:1 contrast
  • Unless they are visibly styled (like an underline) on hover, non-underlined links require a contrast of 4.5:1.
Improve this answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.