WCAG Non-Text Contrast

WCAG Non-Text Contrast requires sufficient contrast for user-interface components and meaningful graphical objects, separately from ordinary text contrast. Under WCAG 2.1 and 2.2, the Level AA minimum is a 3:1 contrast ratio for relevant visual information.

Non-Text Contrast is WCAG Success Criterion 1.4.11 at Level AA. It addresses visual information that is not ordinary text, including controls such as buttons, inputs, and checkboxes, as well as meaningful graphical elements such as charts or icons when their visual distinction is needed to understand the content.

For user-interface components, the visual information needed to identify the component and its state generally needs at least 3:1 contrast against adjacent colors. This can include boundaries, icons, or other visual indicators. Disabled controls are an important exception: WCAG does not require the same contrast for components that are inactive and not available for user interaction.

For graphical objects, the 3:1 requirement applies when the graphic is necessary to understand the content. A decorative illustration does not normally need to satisfy this criterion. A chart line, map feature, or diagram element that conveys essential information can require sufficient contrast, although other WCAG requirements may also apply.

This criterion is different from text contrast. Text is primarily covered by WCAG 1.4.3, which generally requires 4.5:1 for normal text and 3:1 for large text at Level AA. A UI icon can therefore have a different minimum requirement from text placed beside it. Developers should also test component states such as hover, focus, checked, selected, and error states rather than checking only the default appearance.

Key points

Interview questions

What does WCAG 1.4.11 Non-Text Contrast require?

It is a Level AA success criterion for non-text visual information. Qualifying user-interface components and meaningful graphical objects generally need a contrast ratio of at least 3:1 against adjacent colors. It is separate from the text-contrast requirement in WCAG 1.4.3. The goal is to ensure that important controls and graphics remain visually perceivable.

Which parts of a button need to meet non-text contrast requirements?

The visual information needed to identify the control and its state is the key concern. Depending on the design, that can include a visible boundary, icon, or other state indicator. The relevant visual feature should have sufficient contrast with adjacent colors. You should evaluate the component in its meaningful states rather than assuming the default state represents every state.

Does every icon or image need a 3:1 contrast ratio?

No. WCAG 1.4.11 focuses on non-text visual information that is needed to identify controls or understand content. A purely decorative graphic generally does not have the same requirement under this criterion. A meaningful icon, chart feature, or diagram element can require sufficient contrast when its visual distinction is necessary to understand the content. Other WCAG criteria can still apply to an image or icon for separate reasons.

How would you build a frontend workflow to prevent non-text contrast failures?

I would establish design tokens for accessible component borders, icons, and state indicators, then validate the resulting colors against their actual adjacent backgrounds. Automated accessibility tooling can catch many contrast problems, but visual review is still useful for states and contextual graphics. I would test interactive states such as hover, selected, checked, disabled, and error where they communicate information. For charts and other graphics, I would identify which visual features are essential to understanding the data and test those specifically.