On each web page, is each link whose nature is not obvious visible in relation to the surrounding text?
A person with color blindness visits your page. The only clue that distinguishes your links from regular text? Color. And for them, that color means nothing.
When color is the only visual indicator of a link, without underlining, icon, or border, the contrast ratio between the link text color and the surrounding text color must reach at least 3:1. Be careful: this is not about the contrast between the link and the page background, but between the link and the text surrounding it. This is a different measure from the one required by criterion 3.3.
If the link already has a non-color indicator—underline, icon, or bold reserved for links—its nature is "obvious" under RGAA standards. The 3:1 check does not apply in this case.
The check applies to each link state using a distinct color: unvisited, visited, active, hovered, and focused. A link may comply in the normal state and fail in the visited state.
Un test to verify that links remain visually distinguishable
Link/surrounding text contrast (3:1)
- Identify all
<a>elements and elements withrole="link"on the page. - For each link, determine whether it has a non-color indicator of its nature: underline, icon, border, or bold reserved for links.
- If color is the only indicator, measure the contrast ratio between the link text color and the surrounding text color (not between the link and the page background).
- Repeat the measurement for each link state using a different color: unvisited, visited, active, hovered, and focused.
- If the ratio is below 3:1 for any of these states, the test fails.
Examples
❌ Non-compliant : Link differentiated only by a color too close to the text
<p style="color: #333333;">
To learn more, see our
<a href="/privacy-policy" style="color: #666666; text-decoration: none;">privacy policy</a>.
</p>The regular text is in #333333 and the link is in #666666. The contrast ratio between these two shades is approximately 2.2:1, well below the 3:1 threshold. Without underlining or other non-color indicator, a color-blind or visually impaired visitor cannot distinguish this link from the surrounding text.
✅ Compliant : Underlined link: sufficient non-color indicator
<p style="color: #333333;">
To learn more, see our
<a href="/privacy-policy" style="color: #666666; text-decoration: underline;">privacy policy</a>.
</p>The link is underlined. Its nature is identifiable without relying on color. Criterion 10.6 does not apply: the underline is a sufficient non-color indicator, regardless of the contrast ratio with the surrounding text.
✅ Compliant : Link without underline with sufficient contrast on all states
<style>
.lien-corps:link { color: #2685DC; text-decoration: none; }
.lien-corps:visited { color: #5B4DA0; text-decoration: none; }
.lien-corps:hover,
.lien-corps:focus { color: #2685DC; text-decoration: underline; }
</style>
<p style="color: #333333;">
To learn more, see our
<a href="/privacy-policy" class="lien-corps">privacy policy</a>.
</p>Color is the only indicator in the normal state, but the contrast ratio between #2685DC (link) and #333333 (surrounding text) is approximately 3.3:1. The visited state (#5B4DA0) has also been checked and exceeds 3:1. An underline is added on hover and focus to reinforce the indication without changing the layout at rest.
Tips and pitfalls
⚠️ Confusing the 3:1 of 10.6 with the 4.5:1 of 3.3
Criterion 3.3 requires a 4.5:1 ratio between text and page background. Criterion 10.6 requires a 3:1 ratio between link and surrounding text. These are two independent measures on two different color pairs. In audits, the most common mistake is testing only the background contrast and missing 10.6.
⚠️ The visited state, systematically forgotten
Browsers often apply a visited link color close to purple or gray, which can reduce contrast with surrounding text below 3:1. Check the CSS value of a:visited explicitly. If it is not defined, the browser applies its default color, which may well fail the test depending on the page's typographic context.
💡 The simplest solution: keep the underline
Keeping text-decoration: underline on links in body text completely neutralizes this criterion. The underline is a non-color indicator; the 3:1 measurement with surrounding text becomes unnecessary. Removing the underline for aesthetic reasons creates an additional verification obligation on all states.
⚠️ The "surrounding text" is adjacent text, not just any text on the page
The contrast reference is the color of the text directly surrounding the link in the same block. If a link is in a table cell where the text is black, that black is the reference—not the color of a heading or title located elsewhere on the page.
⚠️ Navigation menus are rarely affected in practice
The criterion targets links "whose nature is not obvious." In a structured <nav>, the context makes the nature of elements sufficiently clear for most users. RGAA auditors focus 10.6 verification on links inserted in regular text blocks, where confusion with plain text is real.
Frequently asked questions
In which cases does the default underline validate RGAA criterion 10.6?
How do you measure the contrast between two text colors to validate RGAA accessibility?
Use Includdy or an online contrast checker. Enter the link text color as the "foreground" color and the surrounding text color as the "background." The threshold to meet is 3:1. This is not the same measure as the text/background contrast for criterion 3.3.
How do you check the visited state of a link for RGAA criterion 10.6?
Absolutely. The methodology of test 10.6.1 specifies this explicitly. If your CSS defines a:visited with a different color from a:link, check the contrast ratio for that state too. A grayish visited color can easily drop below 3:1 with dark regular text.
How do you visually distinguish a bold link from surrounding text in RGAA?
Bold can be a non-color indicator if, and only if, it is reserved for links in that context. If other non-link elements also use bold, the indicator is not specific enough. In that case, the 3:1 measurement remains necessary.
How does RGAA criterion 10.6 apply to a link with no surrounding text?
It does not. Criterion 10.6 applies only if the link coexists with regular text from which it might not be distinguished. An isolated link in a block, a link button, or a link that is the only content of its container do not risk being confused with ordinary text; test 10.6.1 does not concern them.