Tests an inline link colour against both the surrounding body text (3:1) and the background (4.5:1). The dual-ratio rule almost no one applies correctly.
Enter your background, body text, and link colour. Tick the underline option if the link has any non-colour signal. The tool returns both the link-versus-text ratio (1.4.1) and the link-versus-background ratio (1.4.3).
Most contrast checkers test one ratio: the link colour against the background. That's the rule under WCAG 1.4.3 and almost every site clears it. But there's a second rule for inline links that very few designers apply: 1.4.1 Use of Colour.
If colour is the only thing distinguishing a link from surrounding text, the link colour must also have at least 3:1 contrast against the body text it sits inside. That's where most brand colours fail. A brand violet at 6:1 against white passes 1.4.3, then sits at 1.8:1 against a typical body text grey, which fails 1.4.1.
If you want your link to be distinguished by colour alone, both ratios apply:
In practice this is much harder than it looks. The link colour needs to sit far enough from the body text colour and far enough from the background. On a white page with dark grey body, an electric blue or violet at full saturation rarely clears both ratios at once.
Underline the link, or bold it, or add an icon, or use a background highlight. Any non-colour cue exempts the link from 1.4.1. You still need to clear the 4.5:1 background ratio. This is the option WCAG implicitly recommends, because underline is the most recognisable link signal across user groups.
Most well-known design systems take option two. GOV.UK underlines links by default. Material 3 underlines inline links. Apple's HIG strongly recommends underline for inline links in body copy.
Navigation links don't need 3:1 against the body text because they're not sitting inside body text. The 1.4.1 rule applies specifically to inline links surrounded by non-link text. Navigation, menu items, breadcrumbs, and tab labels follow normal 4.5:1 rules against background.
Every state of a link is a separate test. Default, visited, hover, focus, and active all need to clear 4.5:1 against the background and, if relying on colour alone, 3:1 against body text. Visited states often get cut at 3.5:1 against the body text and fail 1.4.1 quietly.
A button that visually reads as a link (no underline, brand colour, sits inside or next to body text) is treated as a link for accessibility purposes. The same dual-ratio rule applies.
What contrast does WCAG require for inline links?
If colour is the only distinguishing signal, at least 3:1 against the surrounding body text (1.4.1) and 4.5:1 against the background (1.4.3). Both ratios must pass.
Do underlined links need to meet the 3:1 rule?
No. If the link has an underline or any other non-colour visual signal, 1.4.1 does not require the 3:1 link-vs-text ratio. The 4.5:1 background ratio still applies.
Why do brand link colours so often fail WCAG?
A brand colour that passes 4.5:1 against white often fails 3:1 against the body text. The fix is to add an underline, shift the link colour significantly, or both.
Does WCAG require links to be underlined?
Not strictly. Bold weight, a different font, an icon, or a background highlight all satisfy 1.4.1. Underline remains the safest default because users universally recognise it.
What about visited and hover link states?
Every link state must independently clear the same ratios. Visited, hover, and focus states often pass 4.5:1 against background but fail 3:1 against body text. Test every state.