Inline text links
Check links inside paragraphs where body text and link text sit side by side.
Link color checker
Check whether links stand apart accessibly.
Enter a link color, body text color, and background color to check whether the link is readable, the surrounding body text is readable, and the link has a non-color cue. Hue Codex previews the paragraph, reports link/background and text/background contrast, measures link/body difference, and exports a copy-ready link color report.
Free color utility
Link Checker
Inputs update live, exports are copy-ready, and the color math stays deterministic.
Links
Text link checks
Instructions
- Enter the link color, body text color, and background color you want to test.
- Use Suggest to generate a link color with stronger contrast against the surrounding text and background.
- Keep the underline enabled when links need a non-color cue.
- Review the preview and results, then copy the link color report for accessibility QA or design-system notes.
This paragraph includes an example link inside body text.
How it fits
From color value to usable system.
Hue Codex treats each color as part of a larger workflow: conversion, accessibility, palette roles, CSS syntax, shareable URLs, and production exports.
Deterministic math
Color conversion follows CSS Color 4 conventions, including D50 Lab/LCH, D65 OKLab/OKLCH, and WCAG contrast thresholds.
Readable outputs
Every result is formatted for clear reading, project notes, documentation, and assistive technology.
Free sharing
Palette URLs can be bookmarked and sent without an account, making color decisions easy to revisit.
Quick overview
Hue Codex Link Color Checker is a free browser-based tool that checks a link color, body text color, and background color together. It reports link-versus-background contrast, text-versus-background contrast, link-versus-body-text difference, and whether the link has a non-color cue through underline or enough color difference.
- 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 and text/background against a 4.5:1 normal 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 hover, focus, visited, and real layout review.
What the Hue Codex link color checker does
The Hue Codex link color checker evaluates a link color in context with the body text and background around it. That context matters because a link must be readable against the background and distinguishable from nearby text.
The preview shows an inline link in a short paragraph. The results show link versus background contrast, body text versus background contrast, link versus body text difference, and whether the link has a non-color cue.
Accessible link color definition
An accessible link color is readable against its background and distinguishable from surrounding text without relying on hue alone.
Contrast checks shown by Hue Codex
Hue Codex checks both the link and the surrounding body text against the same background. It also compares the link to body text so you can see whether the link stands apart inside a paragraph.
| 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. |
| Text vs background | 4.5:1 for normal text | 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. |
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.
- 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 hover, focus, active, and visited link 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. The safest link color depends on the body text and background it appears with.
Design-system tokens
Review link, text, surface, hover, focus, and visited 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 and focus states. Link accessibility is about readability, recognition, and interaction feedback together.
This tool checks the default link presentation you enter. Test visited, hover, active, focus, 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 a link color, body text color, and background color together for readability and link recognition.
What contrast does link text need against its background?
Hue Codex checks link text against the background using a 4.5:1 normal text contrast target.
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 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 chooses a preset link color with strong contrast against the background. Body text difference and the non-color cue still need review.
Can I copy the link color report?
Yes. The tool exports the link color, body text color, background color, link/background contrast, text/background contrast, link/body difference, and non-color cue result.