Link Color Contrast Checker
Verify that your link colors are accessible. Links face a unique set of accessibility requirements — they need sufficient contrast against the background and must be distinguishable from surrounding body text. Underlines, hover states, and visited states all affect whether your links pass WCAG standards. Use this tool to test any link color against any background.
Contrast Ratio
This is body text. This is a link that should be distinguishable from surrounding text by color alone (SC 1.4.1). Visited link
URL Scanner
Scan any site for WCAG issues
Pick a seed color and get WCAG-compliant harmonies.
This feature is not yet available. We're actively building it — if you'd like early access or have ideas to share, reach out and we'll prioritize your needs.
Contact UsFrequently Asked Questions
What contrast ratio do links need for WCAG compliance?
Link text follows the same contrast rules as any other text: 4.5:1 minimum for normal-sized text (under 24px regular or 19px bold) and 3:1 for large text. However, there's an important additional requirement from WCAG SC 1.4.1: if a link is identified by color alone (no underline), the color difference between the link text and the surrounding body text must be at least 3:1 in addition to the link-to-background contrast. This is why many designers add underlines — they remove the need for this extra color differentiation requirement.
Should visited links have different contrast from unvisited links?
It's a best practice to differentiate visited links from unvisited ones, but WCAG doesn't mandate a specific contrast ratio between them. The key requirement is that both visited and unvisited link colors individually meet the 4.5:1 or 3:1 threshold against the background. Common patterns include keeping unvisited links a bold brand blue (#1a0dab works well) and visited links a slightly lighter purple (#4b0082). Both colors should be tested individually with our contrast checker against your page background.
How do non-underlined links affect accessibility?
Non-underlined links place a heavier burden on both color contrast and color differentiation. WCAG SC 1.4.1 (Use of Color) requires that if links aren't underlined, the link color must contrast sufficiently with the surrounding body text color — specifically, at least 3:1 luminance difference. This is on top of the standard link-to-background contrast ratio. In practice, this means dark gray body text (#333333) with blue link text (#1a6ad5) may pass AA individually but fail if the link isn't underlined because the two colors are too similar in luminance. The safest approach: always underline links, or ensure an extremely visible color difference.
What about link hover colors and focus states?
Hover and focus states must also meet contrast requirements. When a user hovers over a link, the hover color should maintain at least 3:1 contrast against the background. Focus indicators (typically outlines or ring effects) must have at least 3:1 contrast against the adjacent background per WCAG SC 1.4.11 (Non-text Contrast). A common pattern is to darken the link color on hover or to add an underline on hover if one isn't present by default. Focus rings should use a clearly visible color like a bright blue (#3b82f6) rather than a subtle gray that disappears on light backgrounds.