Link distinguishable by color only

color/link-indistinct

WCAG success criterion: 1.4.1 (level A)
Outcome class: Automatic. An automated check that can report a confirmed violation.
Area: Accessibility, Visual Presentation
Default severity: medium
axe-core rule: link-in-text-block

Why we flag this

Users with color vision deficiency cannot recognize in-text links.

No underline, bold weight or other non-color cue present.

What the rule checks

Scope. Rendered links (a[href] or role=link) with text inside running text (a block with at least two other words), outside navigation and logos, displayed inline.

Expectation. Fails when the link differs from the surrounding text only by colour: no underline, same weight, style, font, bottom border and background (F73). Underline, bold, a border or a background are non-colour cues and pass. G183 passes as well: at least 3:1 contrast to the surrounding text plus a non-colour cue on hover and focus; below 3:1 the hover cue does not help (forms_link_color 2.61:1 fails, forms_gap_link_color 3.71:1 passes). Links in lists, navigation, logos and block-level links are identified by their position. role=link elements in running text are links too. Links inside a same-origin frame are content of the page (forms_gap_frame_link_color). If the host provides no computed style the rule reports itself untested.

Source. WCAG 2.2 SC 1.4.1 Use of Color; failure F73; techniques G183, C15

Detection: shared; needs dom, computed_style.

Failing example

The check reports a violation here. Corpus case link_in_text_block_context, element a#inline-link. The page may contain further findings for other rules.

link_in_text_block_context.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Link in text block: only running text counts</title>
    <style>
        body { color: #222; font-family: sans-serif; }
        a { color: #0050a0; text-decoration: none; }
        ul { list-style: none; padding: 0; }
        .skip { display: inline-block; padding: 12px; min-height: 44px; min-width: 44px; box-sizing: border-box; }
    </style>
</head>
<body>
    <!-- #710: standalone links, identified by position rather than colour -->
    <a class="skip" href="#main">Skip to main content</a>
    <header>
        <div class="logo"><a id="logo-link" href="/">Government Portal</a></div>
        <div class="header-links"><a id="header-help" href="/help">Help</a> | <a id="header-contact" href="/contact">Contact</a></div>
        <nav>
            <ul>
                <li><a id="nav-home" href="/" aria-current="page">Home</a></li>
                <li><a id="nav-services" href="/services">Services</a></li>
            </ul>
        </nav>
    </header>
    <main id="main">
        <h1>Link in text block</h1>
        <ul class="exposed-links">
            <li><a id="list-link" href="/topics">Topics</a></li>
            <li><a id="list-link-2" href="/news">News</a></li>
        </ul>
        <!-- true positive: inline link inside running text, distinguished only by colour -->
        <p>Please read our <a id="inline-link" href="/policy">privacy policy</a> before you submit the form.</p>
    </main>
    <footer>
        <div id="footer-links"><a id="footer-imprint" href="/imprint">Imprint</a> · <a id="footer-privacy" href="/privacy">Privacy</a> · <a id="footer-a11y" href="/accessibility">Accessibility</a></div>
        <ul>
            <li><a id="footer-list-link" href="/sitemap">Sitemap</a></li>
        </ul>
    </footer>
</body>
</html>

Passing example

The check passes here and reports nothing. Corpus case link_in_text_block_context, element a#logo-link. The page may contain further findings for other rules.

link_in_text_block_context.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Link in text block: only running text counts</title>
    <style>
        body { color: #222; font-family: sans-serif; }
        a { color: #0050a0; text-decoration: none; }
        ul { list-style: none; padding: 0; }
        .skip { display: inline-block; padding: 12px; min-height: 44px; min-width: 44px; box-sizing: border-box; }
    </style>
</head>
<body>
    <!-- #710: standalone links, identified by position rather than colour -->
    <a class="skip" href="#main">Skip to main content</a>
    <header>
        <div class="logo"><a id="logo-link" href="/">Government Portal</a></div>
        <div class="header-links"><a id="header-help" href="/help">Help</a> | <a id="header-contact" href="/contact">Contact</a></div>
        <nav>
            <ul>
                <li><a id="nav-home" href="/" aria-current="page">Home</a></li>
                <li><a id="nav-services" href="/services">Services</a></li>
            </ul>
        </nav>
    </header>
    <main id="main">
        <h1>Link in text block</h1>
        <ul class="exposed-links">
            <li><a id="list-link" href="/topics">Topics</a></li>
            <li><a id="list-link-2" href="/news">News</a></li>
        </ul>
        <!-- true positive: inline link inside running text, distinguished only by colour -->
        <p>Please read our <a id="inline-link" href="/policy">privacy policy</a> before you submit the form.</p>
    </main>
    <footer>
        <div id="footer-links"><a id="footer-imprint" href="/imprint">Imprint</a> · <a id="footer-privacy" href="/privacy">Privacy</a> · <a id="footer-a11y" href="/accessibility">Accessibility</a></div>
        <ul>
            <li><a id="footer-list-link" href="/sitemap">Sitemap</a></li>
        </ul>
    </footer>
</body>
</html>

This page is generated from the rule catalogue and the rule contracts; see therule overview for how the outcome classes are derived.