1.2 Use high color contrast for interactive elements

In order to know how to interact with a control or form field you get visual cues that tell you what it is. To help our users with low vision also identify these interactive elements we need the pieces that are needed for identification to have high enough contrast.

WCAG 1.4.11: Non-text Contrast Opens in a new window

Details

  • Visual information that is needed to identify a user interface component, such as buttons and form fields, needs to have a contrast ratio of at least 3.00:1 against adjacent color(s) (measured out to 2 decimal places). This applies in all states (ex. selected, focused, pressed, and checked).
  • Inactive components are exempt from this standard.
  • When the appearance of the component is determined by the user agent and not modified it is exempt from this standard.

Examples

In the example below the bottom border is needed to identify the text input so that indicator must meet a 3.00:1 contrast ratio. The light gray background is not needed to identify the component so it does not have requirements.

A label with a text input shown by a bottom border and feint grey background.

In this second example a complete border is used so the entire border must meet a 3.00:1 contrast ratio.

A label with a text input shown by a complete border.

In this example the input is differentiated only by a background color so the input must have a 3.00:1 contrast ratio to the adjacent background.

A label with a text input shown by a dark blue page background, and white box.