SIA-R69Text has minimum contrast

Accessibility requirements

This rule tests conformance of the following accessibility requirements:

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

This rule applies to every visible text node that is a child in the flat tree of an element in the HTML namespace, except if the text node has an ancestor in the flat tree for which one of the following is true:

the ancestor is disabled, and has a semantic role that inherits from group or widget; or
the ancestor is used in the accessible name of a disabled element with a semantic role that inherits from widget.

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.

This rule makes the following assumptions:

Text nodes that are incidental are either disabled using the aria-disabled state or are not included in the accessibility tree.
Text nodes are not used for logotypes.

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.

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

<p style="color: #333; background: #FFF;">Some text in a human language</p>

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

<p style="color: #666; background: white;">Some text in English</p>

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

<p style="color: #000; font-size:18pt; background: #777;">
    Some text in a human language
</p>

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

<p style="color: #AAA; background: white;">Some text in English</p>

This text is not visible:

<p style="display: none">Some invisible text in English</p>

This text is not part of a text node:

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