1.4.11 Non-text Contrast (AA)
Understanding 1.4.11 Non-text Contrast (AA)
This is like ‘colour 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.
Requirements / What to do?
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
- 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.
Resources
For User Interface Component contrast
For graphics with sufficient contrast
For text in or over graphics
- 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
Resources
Find out more about Accessibility Requirements for People with Low Vision.