Skip to main content

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

Resources

Find out more about Accessibility Requirements for People with Low Vision.