New Rule: Text nodes have minimal contrast (afw4f7) #571
Description
id: afw4f7
name: Text nodes have minimal contrast
rule_type: atomic
description: |
This rule checks that text nodes have minimal color contrast with its background
accessibility_requirements:
wcag20:1.4.3: # Contrast (Minimum)
forConformance: true
failed: not satisfied
passed: further testing needed
inapplicable: further testing needed
input_aspects:
- DOM Tree
- CSS Styling
authors:
- Wilco Fiers
- Kasper Isager
Applicability
Any text node that is visible and a child of an HTML element, except the text node is a descendent of an element that:
- Has a semantic role that inherits from widget
- Is used in the accessible name of a widget that is disabled (i.e. It is part of the label)
- Has a semantic role of group with that is disabled
Note: When the text color is the same as the background color, the element is not visible, and so is not applicable.
Expectation
For each test target, the highest possible contrast between the background colors and foreground colors is at least 4.5:1 (or 3.0:1 for larger scale text), except if the content of the text node:
- is decorative, or
- doesn't express anything in human language
Note: Passing this rule does not mean that the text node has sufficient color contrast. White text on a black and white image passes this rule, whether or not that text is legible depends on the how much of the white words are positioned on the black parts of the image. This requires further testing.
Assumptions
Success criterion 1.4.3 has exceptions for "incidental" text, which includes inactive user interface components and decorative texts. The rule assumes that text nodes should be ignored are hidden from assistive technologies. If this isn't the case, the rule may produce incorrect results.
TODO: The text node is part of a logo or brand name
Accessibility support
There are no major accessibility support issues known for this rule.
Background
- (e.g. WCAG Techniques or links with background information mentioned in Applicability, Expectations or Assumptions)
Test Cases
Passed
Passed Example 1
Description...
<!-- code -->Passed Example 2
...
Passed Example X
overlays
Passed Example X
blurry decorative text
Passed Example X
Text nodes decorating an image
Failed
Failed Example 1
Description...
<!-- code -->Failed Example 2
...
Inapplicable
Inapplicable Example 1
Description...
<!-- code -->Inapplicable Example 2
...
Glossary
Foreground Colors of test nodes
All the colors of the pixels of a text node that change when the CSS color property is changed, except for the colors of aliased pixels.
TODO: What if a text only has aliased pixels, is that possible?
Background Colors of test nodes
All colors not part of the [foreground] in a bounding box around each [visible] character
TODO, must account for shadow https://codepen.io/pen/?editors=0100
Except for aliased pixels
Highest Possible Contrast
Todo
Larger Scale Text
with at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts
TODO: Deal with "bold" fonts
TODO: How to handle CJK fonts?