WCAG 1.4.11: Non-text Contrast

How to

• Sufficient contrast for graphical (interactive) elements without text

  Graphics that are important for understanding, as well as graphical interactive elements (e.g., form fields or icon buttons), need a contrast ratio of 3:1 against the background.

  Technique(s):

  • G207: Ensuring that a contrast ratio of 3:1 is provided for icons
  

• Sufficient contrast for interactive elements with text

  If an interactive element contains text and that text has sufficient contrast (4.5:1), then the visual contrast of the graphical part can be omitted.

  Examples:

  • Button with text: If the text contrast is sufficient, the button itself does not need to meet the minimum contrast ratio of 3:1 against the background.

  • Input field with placeholder text: If the placeholder text has sufficient contrast, the border does not need to meet the minimum contrast ratio of 3:1 against the background.

  Technique(s):

  • G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
  

• Sufficient contrast for focus indicators

  When an element is reached via keyboard (e.g., using the Tab key), the visible focus indicator must be clearly recognizable and have a contrast ratio of at least 3:1 against the background.

  If the native browser focus indicator has a contrast lower than 3:1, it may need to be overridden.

  Learn more in Sara’s article about focus indicators.

  Technique(s):

  • G195: Using an author-supplied, visible focus indicator
  

• Sufficient contrast between adjacent areas

  Adjacent color areas that are important for understanding, such as in diagrams or infographics, need a minimum contrast ratio of 3:1 to each other.

  If the contrast is lower, a border with a minimum contrast ratio of 3:1 to each adjacent color can help.

  Technique(s):

  • G209: Provide sufficient contrast at the boundaries between adjoining colors
  

Notes

• Exception: Graphic content without meaning

  Decorative graphics that carry no informational value do not need to meet contrast requirements. This also includes graphics that are used in addition to explanatory text.

  Example: An envelope icon next to the text “Write us an email.”

  

• Exception: Controls are disabled

  Interactive elements in a disabled state are also exempt.

  Example: A grayed-out button on a form page that only becomes active once all fields are filled in. In its disabled state, it does not need to meet minimum color contrast requirements. However, once it becomes active, the normal contrast requirements apply.

  

• 

  Hint: Logos

  For logos, the usage determines the requirement: if the logo is an interactive element (a link to the homepage), it must have a contrast ratio of at least 3:1 against the background.

  If a logo consists of both image and text, the contrast requirements apply only to the parts that are relevant for recognizing the logo’s content. These parts must have a contrast ratio of at least 3:1 against the background.

  Decorative elements of the logo that have no meaning for content or function don’t need to meet these requirements (e.g., abstract shapes, purely graphic ornaments).