48 lines
2.6 KiB
Markdown
48 lines
2.6 KiB
Markdown
[Back to 1 Perceivable index](index.html)
|
|
|
|
# 1.4.6 Contrast (Enhanced)
|
|
|
|
- Level: AAA
|
|
- Guideline: 1.4 Distinguishable
|
|
- Principle: 1 Perceivable
|
|
|
|
## What it is
|
|
|
|
The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:
|
|
|
|
- **Large Text:** Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
|
|
- **Incidental:** Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
|
|
- **Logotypes:** Text that is part of a logo or brand name has no contrast requirement.
|
|
|
|
## How to test
|
|
|
|
- Check: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
|
|
- Check: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
|
|
- Check: Text that is part of a logo or brand name has no contrast requirement.
|
|
- Use the sufficient techniques below as acceptable methods when applicable.
|
|
- Confirm none of the common failures apply.
|
|
|
|
## Sufficient techniques (W3C)
|
|
|
|
- G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
|
|
- G148: Not specifying background color, not specifying text color, and not using technology features that change those defaults
|
|
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
|
|
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
|
|
|
|
## Advisory techniques (W3C)
|
|
|
|
- G156: Using a technology that has commonly-available user agents that can change the foreground and background of blocks of text
|
|
|
|
## Common failures (W3C)
|
|
|
|
- F24: Failure of Success Criterion 1.4.3, 1.4.6 and 1.4.8 due to specifying foreground colors without specifying background colors or vice versa
|
|
- F83: Failure of Success Criterion 1.4.3 and 1.4.6 due to using background images that do not provide sufficient contrast with foreground text (or images of text)
|
|
|
|
## Resources
|
|
|
|
- WCAG 2.2 SC: https://www.w3.org/TR/WCAG22/#contrast-enhanced
|
|
- Understanding: https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced.html
|
|
- Quick reference: https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2#contrast-enhanced
|
|
|
|
[Back to 1 Perceivable index](index.html)
|