Links and use of color (WCAG 1.4.1): underlines, contrast and alternatives

Success criterion 1.4.1 Use of Color (Level A) says color must not be the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element. A link inside a paragraph is the most common case. If its color is the only thing separating it from the words around it, a reader who cannot tell those two colors apart cannot find the link. W3C's Understanding page names users with color deficiencies, people with partial sight, many older users and people using limited-color or monochrome displays.

Use of color is a separate matter from contrast against the background (1.4.3), and the two are easy to mix up, so the next section puts them side by side. Because 1.4.1 is Level A, any standard that asks for WCAG Level AA includes it, as the ADA Title II web rule (WCAG 2.1 AA) and EN 301 549 version 3.2.1 (aligned to WCAG 2.1 AA) do; WCAG conformance levels explains how the levels stack. This page is general information, not legal advice.

Two contrast checks for one link

A link in body text is measured against two different things. Success criterion 1.4.3 asks whether the link text can be read against its background. Success criterion 1.4.1, through W3C's technique G183, asks whether the link can be told apart from the text around it when color is the only difference.

W3C's note on G183 states the difference: 3:1 is about telling pieces of text apart, and the 1.4.3 ratio is about readability against the background. Both use the contrast-ratio calculation that our color contrast guide works through. A link with an underline needs no 3:1 against the surrounding text, because the underline is the cue that is not color. It still has to meet 1.4.3 against the background, with 3:1 allowed only for large text.

Which cues pass for links in text

W3C's failure technique F73 says links within text are often understood only from their own display attributes, so removing the underline and leaving only a color difference is a failure. Its test asks whether each link identifiable by color can also be identified another way, such as an underline, bold, italics or a sufficient difference in lightness. Technique G182 adds font style and font size.

Our reading is that the underline is the safest default: bold and italics also mark emphasis, so a reader can take a link for a stressed word. The last row is a technicality, not advice.

Which links this covers

F73 acknowledges that some links are visually evident from page design and context, such as navigational links, while links within body text usually are not. In our reading that covers a navigation bar or a link styled as a button; a link inside a sentence has no such context. See also accessible link text and buttons vs links.

The 3:1 route and why it is harder than it looks

G183 is the option for designers who want links without underlines: when color and lightness are the only difference, the link text needs a contrast ratio of at least 3:1 against the surrounding text. Relative luminance is the brightness of a color on a scale from 0 to 1, and the ratio compares the luminance of the two colors. W3C's examples are a link in #3333FF with no underline next to black text, which meets 3:1 against the black text and 4.5:1 against a white background, and a medium-light blue #3366CC next to black #000000, which gives 3.9:1.

Three colors have to work together: the link against the background, the body text against the background, and the link against the body text. In our reading, on a light page that pushes the body text toward black and leaves the link a narrow band between too light to read and too close to the body text to stand out. W3C calls the choice of colors challenging and adds that dark colors can be hard to tell apart even at 3:1, so an underline or bold may still help.

An underline removes that constraint: the link color only has to be readable on the background. For choosing colors that hold up, see accessible brand color palettes.

Hover, focus and visited links

Many sites remove the underline from text links and add it back on hover. F73 uses that pattern as its second example of a failure: the cue exists only while the mouse is over the link, and the same goes for focus. The cue has to be present before hover or focus, or the link needs 3:1 against the surrounding text before it.

/* Fails (F73) when color alone sets the link apart
   and it is under 3:1 against the text */
p a { text-decoration: none; }
p a:hover { text-decoration: underline; }

/* Keeps the cue on at all times */
p a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

Keeping the underline does not mean keeping the browser's default look. MDN describes text-underline-offset as setting how far an underline sits from its default position and text-decoration-thickness as setting its stroke thickness, and marks both as widely available.

When you style hover, style focus too: WebAIM's links article advises pairing them so keyboard users get the same presentation. The article, last updated October 24, 2019, also describes two WCAG 2.0 requirements for body links without underlines: 3:1 against the surrounding text and a non-color cue on hover and keyboard focus. The current G183 lists only the 3:1 check. We would still add a focus style; the focus indicators guide covers what it needs.

Visited links

The Understanding page makes an exception for visited links. Browsers limit what a page can learn about a link's visited state, for privacy, and a stylesheet can change only color for visited links, so authors have very limited control over it. Where color alone separates visited from unvisited links, W3C says it is not a failure of 1.4.1, even below 3:1 between the two link colors. The link text must still meet the 1.4.3 minimum against the background.

Beyond links: errors, required fields and charts

The criterion covers anything color is used to say. The Understanding page's examples include required fields and errors shown in red, and one salesperson's sales in red and another's in blue. The fix is the same each time: keep the color if you like it, and add a second cue that does not depend on it.

F81 covers red text and names bold text or a different font as non-color distinctions; a red border, an error message in words and an icon are our additions in the same spirit.

Two points are easy to miss. First, a difference in lightness counts as an additional cue when it reaches 3:1, which is why a light green and a dark red can pass. The Understanding page adds that where a reader must perceive a particular color, such as an outline that is green for valid and red for invalid, another indicator is needed whatever the contrast. F81's note says a 3:1 lightness difference can satisfy the visual requirement of 1.4.1, but the form may still fail 1.3.1, 3.3.1 or 4.1.2. Our reading is to state the error in words as well.

Second, text for screen readers does not satisfy this criterion. The Understanding page says 1.4.1 requires a visible alternative to color, and that information conveyed to assistive technology does not necessarily pass it. In our reading, the people this protects are sighted and may not use assistive technology at all, so a hidden label or an ARIA attribute answers other criteria and not this one.

Check it yourself

Five checks, a few minutes each, on a page with links in its text, a form or a chart:

1. Find the links without hovering. Read a paragraph and mark the links using only what you can see now. Then hover over one and press Tab onto another. If a cue appears only then, the link fails unless it meets the 3:1 route.
2. Remove the color. Take a screenshot of the page and open it in the color blindness simulator, which has a lightness-only view alongside protan, deutan and tritan views. Links that disappear into the text are relying on hue. The simulator is a model, so treat what it shows as a prompt to look closer. Its color pair check flags colors that are hard to tell apart by a GotAlt cutoff, not a WCAG rule.
3. Measure the 3:1 route. If a link has no underline or other cue, enter the link color as the text color and the body text color as the background in the color contrast checker, then compare the ratio with 3:1. Ignore the pass and fail labels, which apply the text thresholds of 1.4.3. Then enter the link color against the page background to check 1.4.3.
4. Search the style sheets. Look for text-decoration: none on a, including site-wide rules written for the navigation that also reach links in paragraphs, and for underlines set only under :hover.
5. Trigger the other color cues. Submit a form with a required field empty and look at the error. View each chart in the simulator's lightness-only view: can the series still be told apart?

The accessibility bookmarklet measures text against the color painted behind it on the live page, which is the 1.4.3 check for link text. The free scan reads the HTML your server sends and has no CSS engine, so it cannot see how a link is styled. The checks that read markup run in the free scan: Scan my site for free. On monitored pages, GotAlt's browser check includes one for links set apart by color alone (1.4.1); what we check lists it.

Keep it checked

A new stylesheet or theme can change link styling across a whole site after a one-off review. GotAlt checks the pages you monitor every week. It compares the alt text of up to six images per page with the image itself, runs its rule checks, opens monitored pages in a browser for contrast and other checks that need a rendered page (see what we check), and reports what changed. Plans are from $69 a month. Audit my whole site from $69/mo.