Skip to main content
WCAGrules
Quick navigation

Make color-only links contrast and respond

Take the underline off your links. G183 is the narrow path that remains. The link text needs a contrast ratio of at least 3:1 against the non-link text around it. That is measured between the two text colors, not against the background. W3C spells the distinction out because it is the part authors get wrong. This is a sufficient technique for 1.4.1 Use of Color at Level A, and its test has exactly one check, which is that ratio. An extra cue on hover and focus is advice rather than a requirement. W3C recommends it and files the focus-styling technique as advisory. A design meeting the ratio and offering nothing else still satisfies G183. There is a hidden cost. You now have three ratios to hold at once, since link color and body text color each still need enough contrast against the background on top of the 3:1 between them.

How we find it in an audit

Our reviewers measure the link color against the surrounding text color, which is the check the technique actually specifies, and separately measure both against the background. We note the absence of a hover or focus cue as advice rather than as a finding, because that is how W3C files it. Plain underlined links pass without any of this arithmetic.

How affected users experience it

For readers with low vision or a color vision deficiency, an un-underlined link inside a paragraph can be indistinguishable from the text around it. They cannot tell what is clickable, so they either click nothing or click everything. W3C notes that dark colors stay hard to tell apart even at 3:1, which is why underlining links remains the simpler and safer choice for most sites.

Passes vs. fails

Passes: clears the ratio this rule sets. Fails: fashionable, unreadable gray.

Passes

Un-underlined links at #0B57D0 inside #333 text, clearing 3:1 between the two colors, with an underline added on hover and focus.

Fails

Un-underlined links at #767676 inside #595959 body text, a 1.4:1 difference many readers cannot see at all.

Other ways to satisfy this rule

9 guides on this site are filed under 1.4.1 Use of Color. W3C lists this one as sufficient for that rule on its own. Implement it correctly, in a way your readers' software actually supports, and the rule is met.

This guide is our interpretation of W3C technique G183: Using a contrast ratio of at least 3:1 to distinguish inline text links from surrounding text. W3C publishes its techniques as guidance rather than as the standard, and says so on every one of them. The success criterion is what conformance is measured against, and a technique is one documented way to meet it.

Go somewhere useful

Find tools, resources and your workspace.

29 destinations