SIA-R88Text in link has minimum contrast

Accessibility requirements

This rule tests conformance of the following accessibility requirements:

• 1.4.3 Contrast (Minimum)
• 1.4.6 Contrast (Enhanced)

Description

This rule checks that the highest possible contrast of text nodes inside links meets the minimal contrast requirement.

Applicability

This rule applies to every visible text node that is a child in the flat tree of an element in the HTML namespace, for which all the following are true:

• the text node does not have a disabled ancestor; and
• the text node does not have an ancestor with an aria-disabled attribute whose value is true; and
• the text node has an ancestor which is either an <a> or <area> element and has an href attribute. We refer to this ancestor as the ancestor link.

Expectations

1. In each combination of the following states:

   • the ancestor link is either visited or not visited;
   • the ancestor link is either hovered or not;
   • the ancestor link is either focused or not;

   the highest possible contrast ratio between the foreground and background colors of the text node is at least 4.5:1 or 3.0:1 if the text node is large scale.

   There are a total of 8 different combinations of states to check.

   Contrast is not checked when the ancestor link is active because that state is usually transient and it is not clear that poor contrast during that short amount of time is a failure of WCAG; active links should nonetheless have sufficient contrast.

Assumptions

This rule makes the following assumptions:

• Inactive user interface components are either disabled or have an aria-disabled attribute whose value is true.

• Text nodes are not used for logotypes.

Accessibility support

This rule has the following accessibility support concern:

• Different user agents have different levels of support for CSS. This can cause contrast issues in one user agent that do not appear in another.

Examples

Passed

This dark gray link text has a contrast ratio of 12.6:1 on the white background:

<a href="#" style="color: #333; background: white;">Some link</a>

This light gray link text has a contrast ratio of 5.7:1 on the white background:

<a href="#" style="color: #666; background: white;">Some link</a>

This 18pt large black link text has a contrast ratio of 4.6:1 on the gray background:

<a href="#" style="color: #000; font-size:18pt; background: #777;">
    Some link
</a>

Failed

This light gray link text has a contrast ratio of 2.3:1 on the white background:

<a href="#" style="color: #AAA; background: white;">Some link</a>

When this link is hovered, its light gray text has a contrast ratio of 2.3:1 on the white background:

<style>
    a {color: #333; background: white;}
    a:hover {color: #AAA; background: white;}
</style>
<a href="#">Some link</a>

When this link is focused, its light gray text has a contrast ratio of 2.3:1 on the white background:

<style>
    a {color: #333; background: white;}
    a:focus {color: #AAA; background: white;}
</style>
<a href="#">Some link</a>

When this link is visited, its light gray text has a contrast ratio of 2.3:1 on the white background:

<style>
    a {color: #333; background: white;}
    a:visited {color: #AAA; background: white;}
</style>
<a href="#">Some link</a>

Inapplicable

This link text is not visible:

<a href="#" style="display: none">Some link</a>

This text is not part of a text node:

<p>
    <img scr="https://picsum.photos/100" alt="example" />
</p>

This text is inside a <button>, not a <a> or <area>:

<button style="color: #333; background: white;">Some link</button>

This text is inside a <span> element, and is not applicable even though its semantic role has been repurposed to link:

<span role="link" style="color: #333; background: white;">Some link</span>

This text is inside an <a> element without an href attribute:

<a>Some placeholder</a>