Success Criterion 1.4.11
Conformance level AA

Focus Indicator on a Gradient Falling Below Contrast Minimum

1.4.11 — Non-text Contrast

Scenario

Setting

A calendar app's event-creation form

What’s wrong

Focus outlines, icons, or indicators rendered over images/gradients where portions of the boundary fall below 3:1 (irregular background).

Example

Try this on a calendar app's event-creation form: focus outlines, icons, or indicators rendered over images/gradients where portions of the boundary fall below 3:1 (irregular background).

Why it matters

Low-vision and color-blind people who need to perceive controls and meaningful graphics. On a calendar app's event-creation form specifically, they miss information conveyed only by color.

How to test

Measure a focus outline or icon rendered over a gradient/image at its lowest-contrast point along the boundary: any segment under 3:1 fails.

How to fix

The visual element (border, icon, indicator, state marker) must have at least 3:1 contrast against adjacent colors in every state.

Outcome

Fixed, a visitor to a calendar app's event-creation form can see the control's boundary and current state.

Who is affected

Low-vision and color-blind people who need to perceive controls and meaningful graphics.

Learn more

Understanding Understanding document (opens in a new tab)