This is like ‘color contrast for charts, icons and controls’. User Interface components and graphical objects have contrast ratio of at least 3:1. This also covers where the state of a control changes – a button on mouse over for example.
- 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 of a page. These can be charts, graphs, infographics and so on.
Why is this a problem?
Many sight impaired users cannot see important controls or understand graphics if they have poor colour contrast.
Accessibility Requirements for 1.4.11 Non-Text Contrast (AA)
Check that buttons or other inputs and controls have a ratio of 3:1 or higher. This also includes their ‘state’.
NOTE: This does not apply if inactive or if their look is made purely by the browser and not the author.
Make sure parts of any graphics required to understand the content (like a warning icon) have good colour contrast.
Common mistakes for 1.4.11 Non-Text Contrast(AA)
- The purpose and meaning of important images that relate to page content – like if a medicine is poisonous, or other warnings – are hard to make out for a user who is sight impaired.
- The purpose or ‘state’ of a control isn’t clear to the user.
Techniques for 1.4.11 Non-Text Contrast(AA)
Common Failures for 1.4.11 Non-Text Contrast(AA)
The following are common mistakes that are considered failures of this Success Criterion by the WCAG Working Group.
- F78: Failure of Success Criterion 2.4.7 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator
FAQS for Non-Text Contrast (AA)
How do you check non text contrast?
Identify the visual (non-text) indicators of the component that are required to identify that a control exists, and indicate the current state. In the default (on page load) state, test the contrast ratio against the adjacent colors.
Test those contrast indicators in each state.
What is the minimum threshold for color contrast for normal text?
A contrast ratio of 3:1 is the minimum level recommended by [ISO-9241-3] and [ANSI-HFES-100-1988] for standard text and vision.
How do you measure spacing in text?
1.Line height (line spacing) to at least 1.5 times the font size;
2.Spacing following paragraphs to at least 2 times the font size;
3.Letter spacing (tracking) to at least 0.12 times the font size;
4.Word spacing to at least 0.16 times the font size.
What is kerning and tracking?
Kerning adjusts the spacing between any two letters while tracking affects spacing for more than two letters. … Optical kerning adjusts spacing based on letter shapes and is generally a good option for large display text.
Why is kerning and tracking important?
Kerning, leading and tracking are all ways to manipulate the spacing between characters. These special adjustments are an important tool to help create better readability and a more aesthetically pleasing design.
Related to 1.4.11 Non-Text Contrast(AA)
Useful Resources for 1.4.11 Non-Text Contrast(AA)
- Ensuring that a contrast ratio of at least 4.5:1 exists between text and background
- Ensuring that a contrast ratio of at least 3:1 exists between text and background
- Providing a control for users to switch to a view with sufficient contrast
- Using sufficient contrast for images that convey information – Draft