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.
Description
1.4.11 Non-text contrast is similar to 1.4.3 Contrast minimum. People with low vision will have tough time reading and understanding the content that has poor contrast. As regular text requires 4.5 : 1 contrast between the text and background, large text requires 3 : 1 ratio between the text color and it’s background, in WCAG 2.0 non-text elements such as actionable controls, focus indicators, selection identifiers are not specifically mentioned to meet the contrast requirements. In WCAG 2.1, these active controls i.e. buttons and form fields, text on action controls, visual effects such as focus indicators, selection identifiers, boundaries of controls indicating the hit area require a minimum contrast ratio of 3 : 1. This is equal to that of the contrast requirement of large text in 1.4.3 Contrast minimum in WCAG 2.0.
People with low vision should be able to identify meaningful non-text controls and visual effects without relying on any color enhancing features or applications. The clear identification of selections, focus indications and hit areas even help those who have cognitive difficulties.
1.4.11 Non-text contrast required and exceptional elements
The following are some indicative elements and exceptions. On websites the list may be more.
- Text embedded controls, graphics, text / placeholders in text boxes need 3 : 1 contrast ratio.
- Developer defined focus indicators require 3 : 1 contrast ratio.
- Actionable controls require 3 : 1 contrast ratio.
- Visual effects to notify the selection need 3 : 1 contrast ratio.
- A focus indicator required to have a contrast ratio of 3 : 1 with its adjacent background if the focus indicator is modified by the developer. If the focus indicator is the default supplied by the browser, contrast is not required to be 3 : 1.
- IF the state of a control is identified by means other than color change alone, the control and the visual selection identifier does not require 3 : 1 contrast ratio.
- The visual boundary of any control that indicates the hit area is not a requirement of this success criteria 1.4.11 Non-text contrast, however if the visual boundary is the only way to identify the control when the user focus, then the visual boundary must have a 3 : 1 contrast ratio with the adjacent background color.
- Inactive controls on the page such as a disabled button is not required to meet 3 : 1 contrast ratio.
- Parts of graph, controls, text or icons are not required to meet the 3 : 1 contrast ratio if they have content available in another forms such as a table in addition to text on graph, if the graphics or icons are just for aesthetic purposes or that are part of logo / brand names.