Initial commit
This commit is contained in:
@@ -0,0 +1,40 @@
|
||||
[Back to 1 Perceivable index](index.md)
|
||||
|
||||
# 1.4.11 Non-text Contrast
|
||||
|
||||
- Level: AA
|
||||
- Guideline: 1.4 Distinguishable
|
||||
- Principle: 1 Perceivable
|
||||
|
||||
## What it is
|
||||
|
||||
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
|
||||
|
||||
- **User Interface Components:** Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
|
||||
- **Graphical Objects:** Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
|
||||
|
||||
## How to test
|
||||
|
||||
- Check: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
|
||||
- Check: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
|
||||
- Use the sufficient techniques below as acceptable methods when applicable.
|
||||
- Confirm none of the common failures apply.
|
||||
|
||||
## Sufficient techniques (W3C)
|
||||
|
||||
- G195: Using an author-supplied, visible focus indicator
|
||||
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast
|
||||
- G207: Ensuring that a contrast ratio of 3:1 is provided for icons
|
||||
- G209: Provide sufficient contrast at the boundaries between adjoining colors
|
||||
|
||||
## Common failures (W3C)
|
||||
|
||||
- F78: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator
|
||||
|
||||
## Resources
|
||||
|
||||
- WCAG 2.2 SC: https://www.w3.org/TR/WCAG22/#non-text-contrast
|
||||
- Understanding: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
|
||||
- Quick reference: https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2#non-text-contrast
|
||||
|
||||
[Back to 1 Perceivable index](index.md)
|
||||
Reference in New Issue
Block a user