Making Gradient Backgrounds Accessible (Without Killing the Vibe)

Gradients look great. But putting text on top of them is where things go wrong for a lot of people.

The problem is simple: gradients have uneven color distribution. One area might have enough contrast for your text, another might not. And WCAG requires you to test against the worst spot, not the best one.

Here is how to make your gradients accessible without making them boring.

The rule you need to know

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18px+ or 14px+ bold).

With a solid background, you test once and you are done. With a gradient, the contrast changes across the surface. You need to check the spot where your text sits, and specifically the lowest contrast area under that text.

The 3-step fix

1. Add an overlay

The most reliable fix. Put a semi-transparent layer between your gradient and your text.

.hero {
  position: relative;
  background-image: url('/gradient-bg.webp');
  background-size: cover;
}
 
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
 
.hero-content {
  position: relative;
  z-index: 1;
}

A 30-40% black overlay works for white text on most gradients. For dark text on light gradients, use a white overlay at 20-30%.

This is what we do on our own landing page. The gradient stays vibrant, the text stays readable.

2. Pick contrast-safe palettes

Some palettes are naturally more accessible than others. Dark palettes with white text tend to pass more easily because the floor contrast is higher.

This palette stays dark throughout, so white text passes easily:

Deep Navy

This one stays light, perfect for dark text:

Soft Lemon

For the amber palette, you would need dark text or a stronger overlay. The key: decide on your text color first, then choose a palette that supports it.

3. Test the worst spot

Do not test the average. Test the lightest area (for white text) or the darkest area (for dark text) under your content.

Tools that help:

WebAIM Contrast Checker for quick ratio checks
Browser DevTools color picker to sample specific points on your gradient
Your own eyes on a mobile phone in sunlight because that is where most people will see it

Mesh gradients are harder

Mesh gradients blend colors organically, which means the contrast can vary dramatically across a small area. A single mesh gradient can have spots that pass AAA and spots that fail AA in the same background.

Open

For mesh gradients specifically:

Export as an image and use it as a background-image with an overlay. Do not put text directly on a live shader.
Use the gradient as decoration, not as the surface for your primary content. Let the overlay handle readability.
If you must have text on the gradient without an overlay, pick a palette where all colors are either dark or light, not a mix.

Quick checklist

Before you ship a gradient with text on it:

Contrast ratio is 4.5:1+ at the worst spot under your text
Tested on mobile in bright light (not just your dev monitor)
Overlay added if the gradient alone does not pass
prefers-reduced-motion respected if the gradient is animated
Fallback background-color defined in CSS

The bottom line

Accessible gradients are not boring gradients. They are gradients with a plan. Pick your text color, choose a palette that supports it, add an overlay if needed, and test the worst spot.

Most of the time, a single rgba(0,0,0,0.3) overlay is the difference between failing WCAG and passing it. That is 10 seconds of work for a much larger audience.