Links must be distinguishable without relying on color
Estimated effort: about 5 minutes.
When a link appears in the middle of a paragraph and is only distinguished from the surrounding text by color (no underline, bold, or other visual cue), people with color blindness or low vision may not be able to tell that it is clickable at all. This commonly affects inline links inside checkout terms text or product descriptions, such as a "Terms and Conditions" link sitting inside a sentence.
How to fix it
- Find inline <a> elements that sit inside a paragraph of body text, such as a "Terms and Conditions" or "Privacy Policy" link inside checkout agreement text, or a "View full return policy" link inside a product description paragraph.
- If the link's color has at least a 3:1 contrast ratio against the surrounding body text color, no further change is required for this rule.
- Otherwise, add a non-color visual distinguisher to the link so it does not rely on color alone — most commonly text-decoration: underline, or a visible bottom border, on the <a> element.
- Do not remove the underline from inline text links unless you have separately confirmed with a contrast checker that the link color is at least 3:1 against the surrounding text.
- Check the link again with a color-contrast browser extension or by viewing the page in grayscale to confirm the link remains identifiable without its color.
Before and after
Before
<style>
p a { color: #4a90d9; text-decoration: none; }
</style>
<p>By placing this order you agree to our <a href="/terms">Terms and Conditions</a>.</p>
After
<style>
p a { color: #4a90d9; text-decoration: underline; }
</style>
<p>By placing this order you agree to our <a href="/terms">Terms and Conditions</a>.</p>