Check link colors properly: links must pass 4.5:1 against the background like any text, and un-underlined links additionally need 3:1 against the surrounding body text plus a non-color cue. This checker measures all three relationships at once and applies the underline rule correctly.
Settings
Generated locally in your browser — your settings and results never leave this page.
The triangle problem
Inline links are the only common UI element judged by two simultaneous contrast relationships: against the page background (they are text: 4.5:1) and against the surrounding body text (they must be findable). That second relationship forks on a style decision — underlined links are identified by shape and owe nothing; bare links lean entirely on color and owe 3:1 against the body text plus a non-color hover/focus cue (WCAG technique G183). Most checkers test one pair; this one models the triangle.
The squeeze, quantified
Try satisfying all three constraints at once with dark AAA body text and the geometry closes in: text at 7:1+ on white leaves a narrow lightness band where a link can be simultaneously 4.5:1 against white and 3:1 against that text. Saturated mid-dark blues thread the needle — the historical convention exists because it is nearly the only solution. The live sample lets you feel the squeeze; the measured rows tell you when you have escaped it.
Why underlines won the argument
The engineering answer to the squeeze is the underline: one descender-crossing line dissolves two of three constraints, works for every vision type, survives printing and high-contrast modes, and costs a keystroke. Modern CSS removed the old aesthetic objections (text-underline-offset, text-decoration-thickness, text-decoration-color). The checker’s underline toggle exists to make the trade explicit: switch it off and watch which verdicts appear.
Beyond the default state
Hover, focus, active and visited states inherit the same triangle. Focus must additionally satisfy component-contrast rules (the UI Component Checker’s territory), and styled visited-links deserve their own run through this page — the browsers’ default visited purple against dark gray text is a classic silent failure. States are cheap to check once the triangle is understood; the expensive part was ever noticing they needed checking.
Auditing links at scale
One page’s triangle is this checker’s job; a site’s worth of links calls for a strategy. The efficient audit: inventory the distinct link/text/background triples actually in production (usually far fewer than feared — body links, nav links, footer links, links-on-tinted-panels covers most sites), run each triple through here once, and record verdicts beside the tokens. Sites with underlined body links typically pass everything instantly and the audit becomes documentation; sites with bare links discover their tinted-panel variants are the silent failures — the same link blue that clears white backgrounds rarely clears brand-tinted ones.
How to use the WCAG Link Contrast Checker
- Set link, body text and background colors.
- Say whether links are underlined.
- Read the three measured relationships and the verdict.
Frequently asked questions
Why does link contrast involve three colors, not two?
Because links live inside text: they must be readable against the background (4.5:1 like any text) AND identifiable as links. If the only identifier is color, WCAG technique G183 wants 3:1 between link and body text plus a hover/focus cue. Three colors, two relationships, both measured here.
Does underlining really exempt me from the 3:1 link-vs-text rule?
Yes – an underline is a non-color indicator, so the link/text color difference becomes a style preference rather than a requirement. That is why this checker asks about underlines before judging: the same palette can pass underlined and fail bare.
Why did removing underlines become so popular if it adds requirements?
Aesthetics – underlines are typographically heavy. The honest trade: no underline means committing to a genuinely distinct link color (3:1 against text is a big visible difference) plus visible hover/focus states. Most sites that dropped underlines never made that commitment; hence this checker.
What link color works on white with dark gray text?
The classic solution: a saturated mid-dark blue (#1d4ed8-ish territory) – 4.5:1+ against white and 3:1-ish against near-black text is achievable because blue reads dark. The checker's live sample lets you tune until both rows pass.
Do visited links need their own contrast check?
Yes, same rules – and the muted purples browsers default to often fail against body text. If you style visited states, run them through here too; if you suppress the distinction entirely, that is an informed choice this tool at least makes visible.
Is 3:1 between link and text even achievable with underlines off and AAA text?
Barely – very dark text (7:1+) leaves little room for a link that is both 4.5:1 on background and 3:1 from the text. This triangle is why most accessible designs keep underlines. The checker demonstrates the squeeze concretely when you try it.
Do these rules apply to buttons and navigation too?
Standalone interactive elements (buttons, nav bars) are identifiable by position and shape, so the link-vs-text rule targets inline links specifically. Their text still needs 4.5:1 on the button background – that half always applies.
