• Success Criterion 1.4.3
  • Conformance level AA

Text on a Gradient Background Dropping Below Contrast Ratio

1.4.3 — Contrast (Minimum)

Scenario

Setting

A ride-hailing app's trip booking screen

What’s wrong

Text on gradients where part of the string falls below ratio.

Example 

.confirm-header {
  background: linear-gradient(90deg, #f59e0b, #fde68a);
  color: #ffffff;
}
<!-- "Confirm your ride" sits over the header; near the light end the ratio drops to about 1.6:1 -->

Why it matters

A rider confirming a trip in bright daylight glare can't read the button label where the gradient turns pale yellow.

How to test

Measure the lowest-contrast point of text sitting on a gradient background: if any part of the string falls below the ratio, it fails.

How to fix

Keep every point along a gradient dark enough to hold at least 4.5:1 against the text color, not just the darkest stop.

.confirm-header {
  background: linear-gradient(90deg, #b45309, #92400e);
  color: #ffffff;
}

Outcome

The rider reads the confirm button clearly across the entire gradient and taps it with confidence.

Who is affected

Low-vision users and anyone using their phone outdoors, where screen glare already reduces effective contrast.

Learn more

Related scenarios