Dieser Inhalt ist derzeit nur auf Englisch verfügbar
Audit color-contrast
Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Impact:
Serious
WCAG-Konformität:
AA
WCAG 1.4.3
Issue types:
failure, needs review
Text has minimum contrast
This rule checks that the highest possible contrast of every text character with its background meets the minimal contrast requirement.
Content loading...
Autoren: Brian Bors, Wilco Fiers
Finanzierung: WAI-Tools
Applicability
This rule applies to any visible character in a text node that is a child in the flat tree of an HTML element, except if the text node has an ancestor in the flat tree for which at least one of the following is true:
disabled ancestor: the ancestor is an inheriting semanticgroup or widget that is disabled; or
disabled label: the ancestor is used in the accessible name of an inheriting semanticwidget that is disabled.
Expectation
For each test target, the highest possible contrast between the foreground colors and background colors is at least 3.0:1 for large scale text and 4.5:1 for other texts, except if the test target is part of a text node that is purely decorative or does not express anything in human language.
Background
Passing this rule does not mean that the text has sufficient color contrast. If all background pixels have a low contrast with all foreground pixels, the success criterion is guaranteed to not be satisfied. When some pixels have sufficient contrast, and others do not, legibility should be considered. There is no clear method for determining legibility when some but not all pixels have sufficient contrast, which is why passing this rule does not necessarily mean the corresponding success criterion is met.
When the text color or background color is not specified in the web page, colors from other origins will be used. Testers must ensure colors are not affected by styles from a user origin, such as a custom style sheet. Contrast issues caused by specifying the text color but not the background or vice versa, must be tested separately from this rule.
Assumptions
Success criterion 1.4.3: Contrast (Minimum) has exceptions for "incidental" text, which includes inactive user interface components and decorative texts. The rule assumes that text nodes that should be ignored are disabled or hidden from assistive technologies. If this isn't the case, the text node could fail this rule while the success criterion could still be satisfied.
Success criterion 1.4.3: Contrast (Minimum) also has an exception for logos and brand names. Since logos and brand names are usually displayed through images to ensure correct rendering, this rule does not take logos or brand names into consideration. If a logo or brand name is included using text nodes, the text node could fail while the success criterion could still be satisfied.
Text that has the same foreground and background color (a contrast ratio of 1:1) is not considered to be "visual presentation of text", making it inapplicable to the success criterion. Text hidden in this way can still cause accessibility issues under other success criteria, depending on the content.
The definition of disabled element assumes that when the aria-disabled attribute is specified on an element, this element has also been disabled for users that do not rely on assistive technology. If this is not the case, that definition may produce incorrect results and in consequence this rule might be Inapplicable to some text nodes that still require a good contrast ratio.
Accessibility Support
Different browsers have different levels of support for CSS. This can cause contrast issues in one browser that do not appear in another. Because of that, this rule can produce different results depending on the browser that is used. For example, a text that is positioned using CSS transform may be on a different background in a browser that does not support CSS transform.
Implementation of Presentational Roles Conflict Resolution varies from one browser or assistive technology to another. Depending on this, some elements can have a semantic role of none and fail this rule with some technology but users of other technologies would not experience any accessibility issue.
This black text has a contrast ratio between 6.1:1 and 9:1 on gray background with white text shadow on it.
<pstyle="color: #000; background: #737373; text-shadow: white 0 0 3px">
Some text in a human language
</p>
Passed Example 5
This 18pt large black text has a contrast ratio of 3.6:1 on the gray background.
<pstyle="color: #000; font-size:18pt; background: #666;">
Some text in a human language
</p>
Passed Example 6
This 14pt bold black text has a contrast ratio of 3.6:1 on the gray background.
<pstyle="color: #000; font-size:14pt; font-weight:700; background: #666;">
Some text in English
</p>
Passed Example 7
The content of this button ("X") does not convey anything in human language; therefore, it passes the rule regardless of its contrast ratio. However, Success Criterion 1.4.11 Non-Text Content should be examined for this non-text element.
This text has the default browser text color on the default browser background color. By default this is black text on a white background, which has a contrast ratio of 21:1.
<p>Some text in a human language</p>
Passed Example 9
This dark gray text has a contrast ratio of 12.6:1 on the white background in a shadow DOM tree.
<pstyle="color: #CCC; background: #fff;"id="p"></p><script>const shadowRoot = document.getElementById('p').attachShadow({ mode: 'open' })
shadowRoot.innerHTML = '<span style="color: #333;">Some text in English</span>'</script>
This text is using the default user agent text color and background color. By default, this is black text on a white background with a contrast ratio of 21:1
<divrole="button">My button!</div>
Failed
Failed Example 1
This light gray text has a contrast ratio of 2.3:1 on the white background.
<pstyle="color: #AAA; background: white;">
Some text in English
</p>
Failed Example 2
This light gray text has a contrast ratio between 1.2:1 and 2.3:1 on the white to blue gradient background.
<pstyle="color: #AAA; background: linear-gradient(to right, #FFF, #00F); width: 300px">
Some text in English
</p>
Failed Example 3
This light gray text has a contrast ratio between 2.7:1 and 3:1 on the background image.
<pstyle="color: #555; height:50px; padding-top:20px; background: black no-repeat -20px -20px url('/test-assets/contrast/black-hole.jpeg');"
>
Black hole sun
</p>
Failed Example 4
This black text with 30% alpha channel has a contrast ratio of 2.1:1 on the white background.
<pstyle="color: rgba(0,0,0,.3); background: #FFF">
Some text in English
</p>
Failed Example 5
This black text with 30% opacity has a contrast ratio of 2.1:1 on the white background.
<divstyle="background: #FFF"><pstyle="color: #000; opacity: .3">
Some text in English
</p></div>
Failed Example 6
This light gray text has a contrast ratio of 2.3:1 on the white background in a shadow DOM tree.
<pstyle="color: #aaa; background: #fff;"id="p"></p><script>const shadowRoot = document.getElementById('p').attachShadow({ mode: 'open' })
shadowRoot.textContent = 'Some text in English'</script>
Failed Example 7
This semi-transparent gray text has a contrast ratio between 2.3:1 and 4.2:1 on the black and white background. The light gray text is compared to the white section of the background and the dark gray text is compared to the black section of the background.
<style>#backgroundSplit {
color: rgba(90, 90, 90, 0.8);
background-position: top 0 left 0;
background-image: linear-gradient(90deg, transparent, transparent 3.3em, black 3.3em, black 6em);
padding: 01em;
}
</style><spanid="backgroundSplit">
Hello world
</span>
Failed Example 8
The first p element has a contrast ratio of 12.6:1. The second p element, which contains an example of the Helvetica font, has a contrast ratio of 3.85:1. Because this provides information, and is not only for aesthetic purposes, this is not considered purely decorative.
<pstyle="color: #333; background: #FFF;">
Helvetica is a widely used sans-serif typeface developed in 1957 by Max Miedinger and Eduard Hoffmann.
</p><pstyle="font-family: helvetica; background: #EEE; color: #777;">
The quick brown fox jumps over the lazy dog.
</p>
Failed Example 9
This text in a button element has a contrast ratio of 3.85:1.
The grey text has a contrast between 2.7:1 and 2.9:1 against the grey text shadow.
<pstyle="background: #fff; color: #666; text-shadow: #aaa 2px 2px 4px, #aaa -2px 2px 4px, #aaa 2px -2px 4px, #aaa -2px -2px 4px;"
>
Some text in a human language
</p>
Inapplicable
Inapplicable Example 1
This text is not visible because of display: none.
<pstyle="display: none">Some invisible text in English</p>
Inapplicable Example 2
This text is not visible because it is positioned off screen.
<pstyle="position:absolute; top: -999em">Some invisible text in English</p>
Inapplicable Example 3
This text is not visible because the foreground color is the same as the background color.
<pstyle="color: white; background: white;"aria-hidden="true">Hidden text - U U D D L R L R B A S</p>
This text is part of a label of a disabled widget, because it is in a label element that is the label for an input element with type="text".
<labelstyle="color:#888; background: white;">
My name
<inputtype="text"disabled /></label>
Inapplicable Example 7
This text is part of a label of a disabled widget, because it is in an element that is referenced by aria-labelledby from an element with role="textbox".
<labelid="my_pets_name"style="color:#888; background: white;">
My pet's name
</label><divrole="textbox"aria-labelledby="my_pets_name"aria-disabled="true"style="height:20px; width:100px; border:1px solid black;"
>
test
</div>
Inapplicable Example 8
This text is part of a label of a disabled widget, because it is in a label element that is the label for an input element in a fieldset element with the disabled attribute.
<fieldsetdisabledstyle="color:#888; background: white;"><label>
My name
<input /></label></fieldset>
Inapplicable Example 9
This text is part of a label of a disabled widget, because it is in a label element that is the label for an input element in an element with role="group" with the aria-disabled="true" attribute.
<divrole="group"aria-disabled="true"style="color:#888; background: white;"><label>
My name
<input /></label></div>
Inapplicable Example 10
This text is part of a disabled widget because it is a child of a button element with the disabled attribute.
This text is part of a disabled widget because it is a child of an element with the role attribute set to button and with an aria-disabled attribute set to true.
