Accessible Gradients
Ensure text on gradient backgrounds meets WCAG contrast ratios. Test at the lightest and darkest points of the gradient.
CSS
Intermediate
4 min read
Gradient Accessibility
Example
/* Test contrast at lightest AND darkest gradient point */
.hero { background: linear-gradient(135deg, #4a90d9, #1a2980); color: #fff; }
/* White on #4a90d9: 3.2:1 — FAILS AA for body text (needs 4.5:1) */
/* White on #1a2980: 9.1:1 — PASSES */
/* Fix: darken the light stop or use a dark overlay */
.hero { background: linear-gradient(135deg, #2c6bb0, #1a2980); } Pro Tip
Use WebAIM Contrast Checker on every color stop if text overlays a gradient.