Non-text Contrast (UI components).

Buttons, inputs, and icons need sufficient contrast to be visible

What does this check test?

This check verifies that UI components (form inputs, buttons, toggles, checkboxes, radio buttons) and graphical objects (icons, charts, infographics) have a contrast ratio of at least 3:1 against adjacent colors. This includes the component's boundary or visual indicator against its background, and any visual states (focus, hover, selected, disabled). This maps to WCAG 2.2 Success Criterion 1.4.11 (Level AA), introduced in WCAG 2.1.

Why does it matter?

If a text input's border blends into the background, users with low vision cannot find the form field. If a custom checkbox uses a subtle color change to indicate its checked state, users may not realize they have selected it. This criterion extends the contrast principle beyond text to the interactive elements users must perceive and operate. Approximately 1 in 12 men and 1 in 200 women have color vision deficiencies that make low-contrast UI components harder to distinguish.

Who is affected?

UI designers defining component styles and interaction states, design system maintainers setting default component appearances, front-end developers implementing custom form controls and SVG icons, and accessibility auditors evaluating interactive component visibility. This is especially relevant for teams building custom components instead of using browser defaults.

Where does this apply?

All interactive UI components: text input borders, button boundaries, dropdown arrows, toggle switches, sliders, custom checkboxes and radio buttons, pagination controls, tab indicators, and icon buttons. Also applies to informational graphics: chart lines and bars, progress indicators, rating stars, and status icons. Focus indicators are explicitly included — the focus ring must have 3:1 contrast.

How to fix it

/* Input border: 4.5:1 on white — well above the 3:1 minimum */
input {
  border: 2px solid #767676;
}

/* Custom checkbox: 7.3:1 on white */
.checkbox--checked {
  background: #0055cc;
}

/* Bad: ghost button border fails 3:1 on white */
.btn-ghost { border: 1px solid #cccccc; } /* 1.6:1 — FAILS */

/* Good: darker border passes */
.btn-ghost { border: 1px solid #767676; } /* 4.5:1 */

*:focus-visible {
  outline: 3px solid #0055cc;
  outline-offset: 2px;
}

References

• WCAG 2.2 — Success Criterion 1.4.11 Non-text Contrast
• W3C WAI — Understanding Non-text Contrast
• Accessible color palette generator — Stark