Link color checker
Check whether links stand apart accessibly.
Audit every link state against its background and surrounding text, preview realistic contexts, and export a recognizable, review-ready link treatment.
Free color utility
Link Checker
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Quick start
Starter presets
Start with a realistic setup, then adjust any input and watch the result update.
Valid input example: #125FCC link and #10212B body text on #FBFAF5
If input is invalid: Invalid or incomplete color values are identified at the field, announced, and explained in the result area so they can be corrected without guesswork.
Choose a preset or edit the controls directly.
Links
Audit readable, recognizable links
Instructions
- Enter the default, visited, hover, active, body text, and background colors you want to test.
- Choose the text contrast target and the link context so cue guidance matches the real UI.
- Review readability, link recognition, state separation, and non-color cue checks.
- Copy CSS, JSON, Markdown, token-style output, or a link handoff summary for accessibility QA and design-system notes.
The 8 dE state-separation band is a Hue Codex review heuristic, not a WCAG success criterion. Verify all link states in the rendered interface.
Checks
Link review signals
Methodology and guides
How this tool calculates and connects.
Review the formulas, assumptions, edge cases, validation checks, caveats, and related color guidance behind Link Checker.
Methodology pages
Related guides
How it fits
From readable link to complete state system.
Review default, visited, hover, active, body-text, and background colors together, then verify the focus-visible treatment separately in the rendered interface.
Audit the whole state set
Check each link state against the background, compare it with surrounding body text, and verify that state changes remain distinguishable.
Keep a non-color cue
Use an underline or another persistent visual treatment so link recognition does not depend on color difference alone.
Free sharing
Link-color checks can be bookmarked and shared without an account, making results easy to revisit.
Quick overview
Hue Codex Link Color Checker is a free browser-based tool that checks default, visited, hover, active, body text, and background colors together. Each control accepts alpha-capable HEX, RGB, HSL, HWB, Lab/LCH, OKLab/OKLCH, supported color() values, fixed color names, and transparent. Translucent layers are composited in context before the tool reports state-versus-background contrast, text-versus-background contrast, link-versus-body-text difference, state separation, and non-color cues.
- Use the link color checker to test links in the same context where they appear: link, body text, and background together.
- The tool checks link/background, visited/background, hover/background, active/background, and text/background against the selected text threshold.
- The link/body text difference helps show whether color alone is being used to distinguish links from surrounding text.
- An underline counts as a non-color cue; without underline, Hue Codex looks for at least a 3:1 link-body difference.
- A passing report is a strong starting point, but final link states still need focus-visible, dark-theme, forced-colors, and real layout review.
What the Hue Codex link color checker does
The Hue Codex link color checker evaluates link state colors in context with the body text and background around them. That context matters because every state must be readable against the background and distinguishable from nearby text.
The preview shows an inline link plus default, visited, hover, active, and keyboard focus treatment samples. The results show state versus background contrast, body text contrast, link versus body text difference, state separation, and whether the link has a non-color cue.
This tool screens whether link-state colors meet configured contrast, link-recognition, and state-separation checks. Those signals support accessibility review, but they do not certify a complete link system or page as accessible.
Contrast checks shown by Hue Codex
Hue Codex checks each link state and the surrounding body text against the same background. It also compares the default link to body text and checks whether state colors are far enough apart to feel intentional.
| Check | Target or signal | Why it matters |
|---|---|---|
| Link vs background | 4.5:1 for normal text | Shows whether the link itself is readable on the page background. |
| Visited vs background | Selected text target | Shows whether visited links remain readable after navigation history changes the link color. |
| Hover and active vs background | Selected text target | Shows whether interaction states remain readable while the user points, presses, taps, or activates a link. |
| Text vs background | Selected text target | Shows whether the surrounding body text is readable on the same background. |
| Link vs text | Difference signal, with 3:1 used when no underline is present | Shows whether the link color stands apart from nearby body copy. |
| Non-color cue | Underline present or strong link-body difference | Helps avoid using hue as the only signal that text is a link. |
| State separation | Hue Codex 8 dE review heuristic | Helps flag visited, hover, and active states that may feel like accidental near-duplicates. This product guidance is not a WCAG success criterion. |
Why non-color cues matter
Links inside body text should not rely on color alone. A user may miss the link if the only difference is a subtle hue shift, especially under color-vision differences, low contrast, small text, or visual fatigue.
The checkbox lets you mark an underline as present. If underline is off, Hue Codex treats a stronger link-versus-body-text difference as the fallback cue signal, with slightly different guidance for inline, navigation, footer, and dense UI contexts.
- Use underline for inline links whenever possible, especially in long-form body copy.
- If links are not underlined by default, make the link color clearly different from body text.
- Keep both link text and body text readable against the background.
- Review focus-visible, dark-theme, and forced-colors states separately before shipping.
Best uses for a link color checker
Link color checks are useful anywhere links sit inside text, navigation, legal copy, help content, settings pages, documentation, or product UI. A suitable link color depends on the body text and background it appears with.
Inline text links
Check links inside paragraphs where body text and link text sit side by side.
Design-system tokens
Review link, text, surface, visited, hover, active, and focus-visible token candidates together.
Documentation and content sites
Make sure links in long-form content remain readable and discoverable.
Accessibility QA
Copy the report into review notes, bug tickets, and release checks when a link color needs evidence.
Link color caveats
A link can pass contrast and still be hard to notice if it is not underlined, appears in dense text, or has weak hover, active, or focus-visible treatment. Link accessibility is about readability, recognition, and interaction feedback together.
This tool checks the default, visited, hover, and active colors you enter. Test focus-visible, disabled, dark-theme, high-contrast, and forced-colors states in the real interface before finalizing a link color system.
Quick answers
Link Checker FAQ
What is the Hue Codex link color checker?
Hue Codex Link Color Checker is a free browser-based tool that checks default, visited, hover, active, body text, and background colors together for readability, state clarity, and link recognition.
What contrast does link text need against its background?
Hue Codex checks link text against the background using the selected text target: AA normal, AAA normal, or AA large text.
Why does the tool check body text against the background?
The surrounding body text also needs to be readable. Checking body text and link text against the same background helps evaluate the full paragraph context.
What does link versus text difference mean?
Link versus text difference is the contrast ratio between the default link color and the surrounding body text color. It helps show whether the link stands apart from nearby copy.
Do links need an underline?
Underline is a strong non-color cue and is usually the safest default for inline links. If underline is absent, the link should have a clear visual difference from body text.
What counts as a non-color cue in this tool?
Hue Codex treats underline as a non-color cue. If underline is off, the tool looks for at least a 3:1 difference between the link color and body text color.
What does the Suggest button do?
The Suggest button looks for default, visited, hover, and active colors that meet the configured contrast and cue checks and the Hue Codex state-separation heuristic. The suggested set still requires review in the rendered interface.
Can I copy the link color report?
Yes. The tool exports default, visited, hover, active, body text, and background colors plus contrast checks, link/body difference, state separation, non-color cue result, CSS, JSON, Markdown, and token-style handoff data.