SIA-R69Text has minimum contrast

Accessibility requirements

This rule tests conformance of the following accessibility requirements:

Description

This rule checks that the highest possible contrast of text nodes 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, except if the text node has an ancestor in the flat tree for which one of the following is true:

Expectations

  1. 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.

Assumptions

This rule makes the following assumptions:

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 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>

Failed

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>

Inapplicable

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>

Acknowledgments

This document includes material copied from or derived from https://www.w3.org/WAI/standards-guidelines/act/rules/afw4f7/. Copyright © 2024 W3C® (MIT, ERCIM, Keio, Beihang).