WCAG 2.1 - SC 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