• 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 

.event-color-swatch { background: linear-gradient(135deg, #4fc3f7, #1565c0); }
.event-color-swatch:focus { outline: 1px solid #4fc3f7; } /* outline disappears against the lighter end of the gradient */

Why it matters

A user tabbing through color swatches loses the focus outline entirely where it crosses the lighter blue end of the gradient.

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

For focus indicators over images or gradients, use a thick outline with enough offset to sit on a solid background instead of the image itself.

.event-color-swatch:focus { outline: 3px solid #1a1a1a; outline-offset: 3px; }

Outcome

A user tabs across every color swatch and always sees a clear outline, even over the lightest part of the gradient.

Who is affected

Keyboard users with low vision can't reliably track focus across swatches with irregular, gradient backgrounds.

Learn more

Related scenarios