WCAG 2.1 Check Point 1.4.11 - Non-Text Contrast

Summary:

Color of visual UI components and graphics required to read/operate content have sufficient contrast.

Details:

Visual details needed to identify graphics and user interface controls (and their various states) need to have a contrast ratio of at least 3:1 contrast with adjacent colors. This includes, but is not limited to: buttons, form fields, menus, tabs and their focus indicators, boundaries and selected states. This requirement is necessary to ensure that identifying features of controls and states (non-text) are distinguishable by people with low vision. Low contrast controls are more difficult to perceive and may be completely missed by people with a visual impairment.

Exceptions:

  • Inactive (i.e. disabled or ‘grayed out’) UI components
  • Components where the appearance is determined by the user agent and not modified by the author.
  • Graphical objects where a particular presentation is essential to the information being conveyed.

Other Resources

Color Contrast Accessibility Validator

Not sure where to start?

Start with a free analysis of your website's accessibility.

Get Started