SIA-R104Text in widget has enhanced contrast

Accessibility requirements

This rule tests conformance of the following accessibility requirements:

• 1.4.6 Contrast (Enhanced)

Description

This rule checks that the highest possible contrast of text nodes inside widgets meets the enhanced 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 with a semantic role that inherits from widget. We refer to the closest such ancestor as the ancestor widget.

Expectations

1. In each combination of the following states:

   • the ancestor widget is either hovered or not;
   • the ancestor widget is either focused or not;

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

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

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.

Background

This rule is a generic "catch all" rule. Widgets that are build with semantic HTML elements (e.g. <a> or <input> elements) may be in several more states. These states are, however, specific both for one kind of widgets and for the semantic HTML elements representing them (while an element whose role has been change does not natively have this kind of interaction). This rule therefore only checks the "basic" states that are expected to be relevant on any kind of widgets. Specific widgets are checked separately by the following rules:

• Text in link has enhanced contrast;
• Text in text box has enhanced contrast (under development).

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 dark gray button text has a contrast ratio of 12.6:1 on the white background:

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

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>

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

<div role="button" tabindex="0" style="color: #333; background: white;">Some button</div>

Failed

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

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

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

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

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

<style>
    a {color: #333; background: white;}
    a:focus {color: #666; 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 disabled <button>:

<button disabled style="color: #AAA; background: white;">Some disabled button</button>