1.4 Distinguishable · SC 1.4.11

AA2 min read

Non-text Contrast

User interface components and graphical objects required to understand the content have a contrast ratio of at least 3:1 against adjacent colors, except for inactive components, decorative graphics, or cases where a particular presentation is essential.

In plain language

Important visual elements that aren't text — like button borders, icons, or form field outlines — need enough color contrast against their background to be seen clearly.

Why it matters

People with low vision can miss controls entirely if they blend into the background. If a checkbox's border barely differs in color from the page behind it, that person might not even realize there's a checkbox there.

In practice

Fails this criterion

A checkbox has a light grey border on a white background with very low contrast — it's nearly invisible, especially to someone with low vision.

Meets this criterion

The same checkbox has a strong black border on the white background, clearly visible with plenty of contrast, plus a clear checkmark when selected.

Test it yourself

Look at buttons, checkboxes, icons, and form field borders on the site. Do they stand out clearly against their background, or do some seem to disappear or blend in? If they're hard to distinguish, this criterion is failing.

Read SC 1.4.11 on the official WCAG 2.2 specification ↗