Colors
Accessible Link Color Generator
Used by developers, writers, and creators worldwide.
An accessible link color generator produces link, hover, and visited colors that stay readable against a given background. Provide your background color and a preferred link hue, and it searches lightness levels at that hue until the link color clears the WCAG AA 4.5:1 threshold for body text, then derives a slightly more saturated hover color and a shifted visited color so the three states stay distinct. On dark backgrounds it goes lighter and on light backgrounds it goes darker, reporting the link color contrast ratio so you can confirm it passes. Links that blend into surrounding text or fail contrast are a common accessibility issue, especially when underlines are removed; this keeps them legible and clearly differentiated. Developers and designers use it to style anchor colors, define link tokens, and pass audits. Each state is a labelled, paste-ready hex code ready for your CSS link rules.
Read the complete guide — 4 min read
Loading usage…
Free forever — no account required
How to use
- Choose your options above
- Click Generate
- Copy your result
Detailed instructions
- Paste the background the links sit on.
- Choose a hue for the links.
- Click Generate to produce readable link states.
- Apply the colors to link, :hover, and :visited.
Use Cases
- •Choosing a readable link color for body text
- •Keeping hover and visited link states distinct
- •Styling links on a colored or dark background
- •Defining link color tokens for a design system
- •Passing a contrast audit for inline links
Tips
- →Keep links at 4.5:1 contrast for body text.
- →Retain an underline so links are not color-only.
- →Use the distinct visited color to aid navigation.
- →Make the hover color clearly different on interaction.
FAQ
what contrast do links need
Inline link text is body text, so it should reach WCAG AA 4.5:1 against its background. The generator searches shades of your hue until it clears that threshold and reports the achieved ratio.
why differentiate visited links
A distinct visited color helps users track which links they have already followed, aiding navigation. The generator shifts the hue for the visited state while keeping it readable against the background.
do links still need an underline
Color alone should not distinguish links from text, since color-blind users may miss it. Keep an underline or another non-color cue, and use these colors to reinforce, not replace, that signal.
You might also like
Popular tools from other categories that share themes with this one.