WCAG 2.0 AA requirement for 3:1 color contrast between links and surrounding text?

718 Views Asked by At

I'm seeing requirements posted on sources like https://webaim.org/blog/wcag-2-0-and-link-colors/ and others that state to be compliant with WCAG AA recommendations a color contrast between links and the surrounding text of 3:1 is needed (assuming non-bold smaller size fonts).

So if you combine these two requirements, in order to be Level AA conformant, your page must have all of the following:

  • A 4.5:1 contrast between the non-link text color and the background.
  • A 4.5:1 contrast between the link text color and the background.
  • A 3:1 contrast between the link text color and the surrounding non-link text color.

In other words, your link color has to be significantly different from the background color AND the surrounding text color, which also has to be significantly different from the background color.

In reading the actual recommendations I'm not seeing that requirement, however. The only mention is one possible technique (G183) to resolve Use of Color (1.4.1) issues. The two sections on Contrast (Minimum 1.4.3 and Enhanced 1.4.6) have no mention of this requirement.

Based on my understanding of the documentation directly from WCAG, it seems to me that the 3:1 contrast between links and surrounding text is only required if you do not have any other visual indicator like a link underline and if you are going to rely solely on that 3:1 color contrast you need to have a non-color visual hover/focus indicator.

Can anyone confirm or deny?

1

There are 1 best solutions below

1
On BEST ANSWER

you are correct, if you have a second identifier for links such as an underline then there is no need to worry about the surrounding contrast issue.

You have referenced all the relevant documents but the key word in 1.4.1 Use of colour is only (cannot be used as the only visual means of conveying information).

Your links can be the same colour as your text if you use underlines or similar to denote hyperlinks (although I would recommend a different colour just because that is expected behaviour).

A better way of interpreting the rules / to think about it is "if this page was black and white how could I convey the meaning?". Colour should be used to enhance the experience for people with no colour blindness, but the page should work in greyscale too.

The key thing that people often overlook is that you can't use colour to convey meaning alone for anything. What about visited links? What about activation? What about focus?

A good way to check

Google chrome now has filters to simulate colour blindness.

The simplest way to check your page is accessible is to open developer tools in Google Chrome and go to "rendering" -> "Emulate vision deficiencies" -> "Achromatopsia" (which is complete colour blindness).

Then test your page and see if anything is hard to use.