WCAG 2.0 and Link Colors

WCAG 2.0 color requirements

WCAG 2.0 requires that the foreground and background colors have a 4.5:1 contrast ratio at Level AA and a 7:1 contrast ratio at Level AAA. You can use our contrast checker tool to determine what the ratio is between any foreground and background color.

WCAG 2.0 also requires (at Level A) that color not be used as the sole method of conveying content or distinguishing visual elements. They further define this requirement for links with Technique G183, which states, “Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them.” This means that if you do not underline your links (or provide some other non-color designator for links), that the links must be sufficiently different in contrast from the surrounding text.

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.

Meeting these requirements

If you start exploring this, you’ll find that this requirement leaves only a small window of available page and link colors. For example, if your page has black text on a white background and you use the standard blue color for links, the link color must be between approximately this color of blue (#6e5eff) and this color of blue (#531fff). Any lighter or darker and it will not have sufficient contrast to the adjacent black text or to the white background, respectively.

And if your text/background colors aren’t pure black and white, this significantly narrows or eliminates the window of colors with sufficient contrast.

Link states

This becomes more complicated if you want to provide various link states (hover/focus, visited, active) colors. If you go with the traditional blue, red, and purple colors for link states, each of these three colors would have to fit into the narrow window of available contrasts.

Some testing shows that this is possible… barely. The following colors for link states meet these requirements for a black on white page:

Normal: #3344dd
Hover/Focus/Active: #bb1122
Visited: #884488

But there’s not much wiggle room – if you change any of these colors much you’ll break either the 3:1 requirement to black or the 4.5:1 requirement to white. The W3C does provide a list of web-safe colors that fit within these contrast requirements. But if your page doesn’t have black on white (or vice versa), it quickly becomes impossible to get any one color to work, let alone two or three colors for the various link states.

Level AAA conformance

To complicate things further, if you’re looking for AAA conformance, which requires foreground/background contrast of 7:1, you have virtually no choice in the color combinations. You must have black text on a white background and your blue/red/purple colors must be VERY close to #3344dd, #b50010, and #804180. These work out exactly to 3:1 to black and 7:1 to white, the very minimal levels allowed.

Hover/focus state requirements

It’s important to note that according to G183, focus/hover states for links must have a non-color designator. This typically means that you would add the underline style to the link when it is hovered or tabbed to. This is a Level A requirement.

Because links that have current focus or are being activated will be visually apparent through the non-color designator, not to mention the fact the user has manually focused them, I believe the 3:1 contrast rule does not (or should not) apply to the hover, focus, or active states. In other words, it’s acceptable to have the hover, focus, and active link be very similar in contrast to the surrounding text color because the user must have done something with the link to activate that state AND the non-color designator must be present if they’ve done so. The 4.5:1 (or 7:1) contrast requirement to the background does apply to all link states.

Summary

Because of the WCAG 2.0 contrast requirements, if you don’t underline your links, there’s not much flexibility if you want to be Level AA, let alone Level AAA conformant. WCAG recognizes that meeting these contrast requirements “is not the preferred technique to differentiate link text”. Of course the easy solution to this is to simply underline links in their default state. Interestingly, underlined links can be the exact same color as their surrounding text, though this is far from optimal.

The contrast requirements for non-underlined links is a Level A guideline, which might suggest that they are of more importance than having high levels of contrast for non-linked content (which, interestingly, is only addressed at Level AA and AAA – white text on a white background with white underlined links is seemingly allowed at Level A). Regardless of conformance, it is vital for accessibility that there be good contrast for text and that links be discernible.

So, are the WCAG contrast requirements too stringent and inflexible? Or is it optimal for accessibility for WCAG 2.0 to limit non-underlined links to this narrow contrast window?

Comments

  1. Steve B

    This is what can only be classified as a “conundrum” and I can tell you that I am a person affected by the very cause for this requirement.
    The solution required for conformance still poses some problems for me.
    I’ll try to be brief.
    Contrast and colour difference can be opposing concerns.
    Since stark white can be very tiring, I have my browser set with a very light gray background. When sites set a white (#000000) background, I put up with it, It’s not usually a big issue.

    In Jared’s requirements example: “this color of blue (#6e5eff) and this color of blue (#531fff)”, the first colour is indistinct, causing me to have to exert extra effort to focus and read the text.

    In the second case:
    “Normal: #3344dd
    Hover/Focus/Active: #bb1122
    Visited: #884488″,
    the “Hover/Focus/Active” is colour is perceived, by me, as not distinguishable from the surrounding black text.
    Mouse-scanning or tabbing usually helps but is a PITA.

    When it comes to the “Level AAA conformance” example, I can’t distinguish the “#b50010″ colour from the surrounding black text.

    My advice: “Do the best you and we’ll figure out the rest”

    Steve.

  2. David Travis

    Jared

    This is an excellent article and a really useful interpretation of the guidelines.

    An additional problem with these colour requirements is that they are based on the assumption that colours are rendered exactly the same on different monitors: that colour “#3344dd” on your monitor looks the same as on mine. This will be true with colour calibrated monitors only, which represent a fraction of the display hardware in existence. In reality, colour “#3344dd” will not reach a 3:1 contrast ratio on many monitors in the real world, and may exceed 3:1 on other monitors. The fact is, we just don’t know. In most cases, this variability isn’t a problem but when we’re talking about applications with very little wriggle-room — like the one you’re writing about — it becomes a major confounding factor.

  3. Tim H.

    Yes, the colour choices are restrictive, if the page author chooses to indicate links by colour alone. However, what about the user’s perspective?
    The user sees the page, but no underlined links (or any other non-colour indicators.) To figure out which items are links, the user now has to tab through the page or hold the mouse over each element to determine which ones might be links. To me, that sounds like a recipe for user frustration and inefficiency. I prefer to avoid frustrating users and making tasks more difficult to perform.
    I agree about the colour contrast for the hover, focus, and active states. I think the purpose of guideline 1.4 and success criteria 1.4.1 would seem to indicate that colour is nnot as important if there is some other type of indicator present.

  4. C Darling

    Technically, trying to implement this sets of requirement to comply with guideline 1.4 could be frustarting, depending on the target audience.

    For best practice, would it be correct to conclude that this guideline cannot be met, unless the links are underlined on a webpage?

    I have QA’ed some webpages using Colour Contrast analyser and Fujitsu ColorDoctor and I agree, it is difficult for users to differentiate a link and non-linked text on a webpage; especially when looking at a page in black and white.

  5. Jared Smith

    C Darling asked, “For best practice, would it be correct to conclude that this guideline cannot be met, unless the links are underlined on a webpage?”

    It certainly can be met, but only under some rather limiting circumstances. I wouldn’t discount this priority altogether, but the W3C’s recommendation that this is not the best way of providing accessibility of links should certainly be weighed strongly.

  6. Richard Warren

    I have a problem understanding why anyone would think it a good idea to provide link text that is not underlined. The first lesson a new web user gets is that underlined text is a link to another page, so why confuse your users by removing the underline?
    I am not disabled but I have real problems with non-underlined links when I use my mobile phone. People who are colour blind (or using a monochrome monitor) must also be disadvantaged. Surely the primary purpose of a web page is to communicate something to the user. Hiding link text by removing the underline isn’t effective communication.

    Richard
    (sorry about the rant)

  7. Deb

    Like Richard, I tend to use underlines for links. I want to make the user experience as hassle-free as possible and, as he said, people expect links to be underlined.

    But what about navigation menus? I tend to use color changes to indicate the hover state and the currently selected link, albeit the text size is generally larger.

  8. David Ashleydale

    Richard, some of the visual designers I’ve worked with really dislike what a page looks like with a sea of underlined links. It’s visually cluttered and daunting. In cases where there are a lot of links in lists, they prefer to not underline links, in order to ease the eye.