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

border: 1px solid #dcdcdc; /* icon outline, ~1.2:1 against white */

Why it matters

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

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. border: 1px solid #767676; /* ~4.5:1 */ Icons, borders, and other non-text UI elements need at least 3:1 contrast to stay visible.

Outcome

On a calendar app's event-creation form, this barrier is gone for low-vision and color-blind people who need to perceive controls and meaningful graphics — they can finish what they came here to do.

Who is affected