• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Logo for DigitalA11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / Web Accessibility / WCAG / Understanding SC 1.4.11 Non-text Contrast

Understanding SC 1.4.11 Non-text Contrast

Last Modified: April 27, 2020 by sathish kumar Leave a Comment

Success Criterion 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.

Modern design practices heavily rely on visual presentations for identification of active user interface components and dissemination of data. But users with moderately low vision have difficulty in distinguishing the visual indicators of active UI elements; their states and graphical objects where colors are the only way to identify and interpret data.
This success criterion sets out to ensure that the luminosity contrast of such elements meet a minimum contrast ratio of 3:1 with their adjacent color. This will ensure ease of navigation and operability for low vision users without the need for any contrast enhancing tools.

What are visual indicators?

  • Visual boundary or hit-area of an input field where there is no placeholder (applies to any active interface element)
  • States like checked/unchecked states of radio buttons and checkboxes; focus states like a focus indicator (a border or dotted line)
  • Graphical objects such as charts, graphs and icons like a left-pointing icon of a “previous” button

are some of the examples of visual indicators. Note that all such visual indicators must meet the 3:1 ratio if no textual representation or solid alternatives are present.

Adjacent colors

For any UI components, an adjacent color is the color that is close to the component itself. For a better understanding, let’s take the example given in the understanding document:
For an input field with dark border, white internal background and white external background, the external background is the adjacent color. If there are multiple colors, choose only the colors that prevent the users in distinguishing the elements to measure the contrast ratio.

Exceptions

This success criterion does not force the authors to have visual boundary or a visual indicator. It applies to only the visual boundaries, focus states and other states. Aslo, if a chart displays the values or has a conforming alternatives, this SC is not applicable there too.

Points to ponder

  • Ensure hit-areas and focus indicators have 3:1 contrast ratio with their inner or outer background
  • Ensure the checked/unchecked states meet the 3:1 ratio against their adjacent color in order to distinguish the states
  • Ensure parts of graphs and charts where color is the only way to decipher the information, the contrast ratio is met against adjacent colors
  • Ensure appropriate color combinations are chosen and defined for UI elements and other graphical objects in the style guides and the design documents in order to avoid uncomfortable retrofitting.

References

Understanding SC 1.4.11 – Non-text Contrast

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

More Accessibility Articles

Filed Under: WCAG

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • A Sneak peek into WCAG 3.0 First Public Draft
  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally

Recent Comments

  • Raghavendra Satish Peri on Foresee Your Colors: Tools to Evaluate your design for Color contrast Accessibility
  • Raghavendra Satish Peri on Digital Accessibility Companies Roundup
  • Andrew Somers on Foresee Your Colors: Tools to Evaluate your design for Color contrast Accessibility
  • Regine Lambrecht on Digital Accessibility Companies Roundup
  • william hruska on 18 Free Mobile Accessibility Testing Tools

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y