1.4.11 Non-text Contrast

Contrast requirements do not apply only to text. Interactive components like buttons, checkboxes, text inputs, and radio buttons must also be visually distinguishable. So must parts of charts, graphs, and diagrams that convey information.

The required ratio is 3:1, which is lower than the 4.5:1 required for normal text but still a meaningful threshold.

The contrast is measured between the component or graphic and its adjacent background. The entire component does not need to meet the ratio, just the parts that identify its boundaries or state.

Check the border or outline of form inputs, checkboxes, and radio buttons. A light grey border on a white background often fails.

Check button borders and background colours. A white button on a white page with only a subtle shadow will fail.

For charts and graphs, ensure the data points, lines, or bars have sufficient contrast against their background.

Focus indicators must also meet 3:1 contrast to satisfy this criterion.

• Text input with a very light grey border on a white background (below 3:1)
• Unchecked checkbox that is barely visible against the page background
• Line chart where data lines do not contrast sufficiently against the chart background
• Button that relies only on a very subtle drop shadow to distinguish it from the surrounding background

Inactive or disabled controls are exempt from this criterion. A greyed-out button that cannot be interacted with does not need to meet 3:1. The exemption is only for truly inactive states, not for visually deprioritised elements that are still functional.