1.4.11 - Non-text contrast

Make sure that visual information that identifies important graphics, interactive controls and their **state** has enough contrast against adjacent colours.

Summary

User Interface components and graphical objects must have a contrast ratio of at least 3:1.

Requirements

For user interface components

  • Visual information required to identify user interface components (like the border or background of a text input field), and what state they're in (like focused, or in error), must have a 3:1 contrast ratio against adjacent colors.

    • Except for
      • inactive components
      • if the appearance of the component is determined by the Operating System/Web Browser, and not modified

Common mistakes

  • A text input field doesn't have border or background colour with enough contrast, so it's hard to see or understand that there is a text input.

  • A text input's focus indicator doesn't have enough contrast, so it's hard for users to notice that the text input is selected.

OK
<figure>
  <img src="../assets/icon_1411_success.png" height="80">
  <caption><div>It's clear that this icon represents Facebook, because the Facebook logo uses enough colour contrast.</div></caption>
</figure>
Fail
<figure>
  <img src="../assets/icon_1411_fail.png" height="80">
  <caption><div>It's not visible enough that this icon represents Facebook, because the colour contrast between the green and the white is not sufficient.</div></caption>
</figure>

For graphical objects (like icons, or parts of an infographics)

  • Any visual element that users need to see in order to understand the content of a page must have a 3:1 contrast ratio against adjacent colors.

Common mistakes

  • The purpose and meaning of important images - like if a medicine is poisonous, or other warnings - are hard to see for a user who is sight impaired.
Example: star rating
OK
<figure>
  <img src="../assets/star_rating_1411_success.png" height="40">
  <caption><div>The presence of the stars is indicated by their border, which is in black and has enough contrast with white.</div></caption>
</figure>
Fail
<figure>
  <img src="../assets/star_rating_1411_fail.png" height="40">
  <caption><div>The presence of the stars is only indicated by their background colour, which doesn't have enough contrast with white.</div></caption>
</figure>

Why?

Many sight impaired users cannot see important controls or understand graphics if they have poor colour contrast.

Official wording in the Web Content Accessibility Guidelines

1.4.11 Non-text Contrast (Level AA): 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.

See the W3C's detailed explanation of this guideline with techniques and examples.

Guidance for Design

  • Check that buttons or other inputs and controls have a ratio of 3:1 or higher. This also includes their 'state'.

    • 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.

More guidance for design

Discuss on Twitter • View on GitHub • Main Sources