TechCompare LogoTechCompare
Showing centimeters. Press to switch to inches.Showing inches. Press to switch to centimeters.

How much contrast does a link need against the text around it?

By TechCompare · Updated · How we check

If color is the only thing setting a link apart, the link needs at least 3:1 against the text around it. Add an underline or bold text, and that color check no longer applies.

An inline link can be just a different color on the same text, and that's where the 3:1 question comes from. This page checks the link color against the text color around it, not against the page background, because that's the pair technique G183 measures. It also covers when the check doesn't apply.

Rule
Link against text
Technique G183 (3:1+)
Example ratio
3.9:1
#3366CC on #000000
Category
WCAG Rules
Accessibility knowledge base
This exact #3366CC on #000000 pair, pre-loaded. Edit either color, see the live WCAG ratio, or compare a second pair.
Edit in the full tool

How this is calculated

The 3:1 figure comes from technique G183, not from a success criterion. G183 supports 1.4.1 Use of Color. It applies when inline links differ from the surrounding text only by color, with no underline or other visual indicator, and then the link and the text need at least 3:1 against each other. Both colors also need 4.5:1 against the page background under 1.4.3 Contrast (Minimum), since G183 says the link and text colors still have to meet the text contrast rules. G183 is one sufficient way to meet 1.4.1, not the only one.

G183 uses this same pair, a #3366CC link on black text, as one of its examples. Against black text, #3366CC reaches 3.91:1 and clears the 3:1 check. On white, it reaches 5.37:1, which clears 4.5:1. A pure blue like #0000EE is the trap: it reaches only 2.23:1 against black text, but it reaches 9.40:1 on white, which clears 4.5:1. Softer body text changes the math. Dark gray text like #333333 reaches 12.63:1 on white. No link color can be both at least 3:1 from that text and at least 4.5:1 from white. To clear 3:1 from the text, a link has to be light, and that's too light to reach 4.5:1 on white.

Verdict

Advice: keep the underline on links in body text, even when the link color clears 3:1. G183 says authors may still consider an underline or bold text, and it notes that "especially for dark colors, it can be difficult to visually distinguish between differently colored text." With soft body text like #333333, no color route works, so the underline is the fix that doesn't depend on the palette.

More Contrast scenarios

WCAG AA for normal text
WCAG AA sets a 4.5:1 minimum contrast ratio for normal text (under 18pt or 14pt bold) against its background.
View details
WCAG AAA for normal text
WCAG AAA requires a minimum contrast ratio of 7:1 for normal text, a higher bar than the 4.5:1 AA requirement.
View details
Text on background images
Text over a background image can be hard to check because image brightness varies across the surface.
View details

Related guides

WCAG AA for normal text
The 4.5:1 threshold that the link and the text both have to meet.
View guide
Large text contrast
The 3:1 figure for large text, which is a success criterion, not a technique.
View guide
Button and icon borders
Controls that look like links can fall under the non-text 3:1 rule.
View guide
Building accessible palettes
How to store link and text pairs as design tokens.
View guide

Frequently asked questions

What contrast do links need against the text around them?
When color is the only thing that marks a link, the link needs at least 3:1 against the surrounding text. That figure comes from technique G183. The link and the text each also need 4.5:1 against the page background. A second cue, like an underline or bold text, takes the link out of that 3:1 check.
Is the 3:1 link contrast rule required by WCAG?
Not as a success criterion. It's a technique for 1.4.1 Use of Color, which says color can't be the only visual means of distinguishing a visual element. G183 is one sufficient way to meet that rule, so an underline or another cue is another way to pass.
Do links in navigation menus need this 3:1 contrast?
The 3:1 figure comes from G183, and G183 is about inline links inside running text. It doesn't address navigation menus, so it doesn't settle the question for them.
Do buttons that look like links need 3:1 contrast?
G183 covers inline text links, not buttons. Buttons can fall under 1.4.11 Non-text Contrast, which asks for 3:1 against adjacent colors for the visual information that identifies a control. See the button and icon border page for the control rules.

Related tools

Color Picker

Pick colors, convert between HEX, RGB, HSL, HSV, OKLCH and CMYK, and find the nearest CSS and Tailwind color.

Use tool

JSON Formatter

Validate, format, and minify JSON. Browse it as a tree, run JSONPath queries, compare two documents, or validate against a JSON Schema.

Use tool

Aspect Ratio Visualizer

Visually compare width differences between 16:9, 21:9, and 32:9 monitors.

Use tool