Text over a gradient can look readable in one part of a card and disappear a few pixels away. A gradient changes color continuously, so testing only its first and last swatches may miss a low-contrast area behind a letter. This guide explains how to build the gradient, control the text area, and review the final rendered result.
Test the area behind the whole text block
A gradient is not a single background color. Its appearance depends on the color stops, direction, interpolation, transparency, container size, and the point where the text sits. If the text crosses from a dark stop into a light stop, one text color may not remain readable over both.
Start by placing the text in its final location and viewing the entire block. Check the letters and their immediate background across the line, including the ends of long headings. A text label over a smooth two-color gradient may look fine in the center while a word near the pale edge loses contrast. If the gradient animates or responds to screen size, test the relevant states and dimensions too.
A flat-color contrast checker can test a chosen pair, but a gradient may require testing multiple representative positions or using a design with enough contrast margin across the full region. A single sample point does not prove every point underneath a word has the same contrast. The W3C guidance on contrast minimum defines text contrast criteria; the final color treatment must be evaluated in context.
Design the background around the content
If the text is important, treat its contrast as a requirement of the composition rather than a late adjustment. Choose the text color and the gradient stops together. Keep the lightest or darkest region behind a heading when the text color needs it, and avoid placing essential copy across a transition that passes through similar luminance.
For a white heading, a gradient may need to stay dark enough throughout the text area. For dark text, the gradient may need to remain light. If brand colors pull in opposite directions, preserve them in decorative portions of the background and give the text a stable surface of its own.
You have several options:
- Move the text to a part of the gradient with consistent contrast.
- Restrict the gradient so it does not pass behind the text.
- Add a solid or translucent surface behind the text.
- Use a text shadow only when it improves legibility without blurring letter shapes; do not assume a shadow fixes a poor background.
- Change the text color or gradient stops, then test the actual pair again.
A deliberate text panel is often clearer than trying to force one text color over every part of a complex gradient. It can be transparent enough to preserve the visual while creating a predictable region behind the words.
Use an overlay for gradients over images
When a photo sits behind text, an overlay can reduce the variation underneath the copy. A common pattern layers a semi-transparent gradient above the image:
.hero {
background-image:
linear-gradient(90deg, rgb(10 12 18 / 88%), rgb(10 12 18 / 8%)),
url("/images/hero.jpg");
background-size: cover;
background-position: center;
color: #fff;
}
This example darkens one side of an image so white copy can sit there. It is only a starting pattern; it does not guarantee sufficient contrast for every image or crop. The image's colors, responsive position, and overlay opacity change the result. If the subject moves behind the text at a narrow viewport, review the mobile crop and adjust the overlay or text placement.
You can also place a pseudo-element overlay above the image and below the text. Keep the stacking order explicit and ensure the overlay does not intercept pointer events if the content needs interaction. If the image or gradient is decorative, use it as a background and keep meaningful text as real HTML rather than baking the text into an image.
Choose gradients that preserve hierarchy
Color contrast and visual hierarchy are related but distinct. A high-contrast headline can be readable while a smaller subtitle fades into the same background. Test each text role, especially small labels and supporting descriptions. A large heading does not make adjacent small copy easier to read.
Check links and controls over the gradient too. An underlined link can remain identifiable when its hue is subtle, but underline alone does not solve every contrast problem. Buttons should have a clear boundary or fill, and keyboard focus must remain visible against both the control and surrounding gradient.
If the gradient is decorative, keep it subordinate to the message. Strong saturation, many color stops, or fast animation can compete with text. Reduce the visual complexity behind the copy, reserve the richest color transitions for empty regions, and honor reduced-motion preferences if the gradient moves.
Responsive gradients need responsive checks
A gradient that runs horizontally on a wide screen may appear behind an entirely different portion of text on a phone. Background images may crop differently due to cover, container height, and viewport shape. Text may wrap to more lines, crossing new color regions.
Check at least the widest and narrowest supported layouts, plus a content state with the longest expected heading. Do not just shrink the browser window and inspect the first line. Look for changes in line breaks, image focal point, overlay direction, and any position where light text lands over a light section.
For a reusable component, test content variation as well as viewport variation. A localized heading, a longer translated string, or a dynamic product name can occupy more of the gradient than the original sample. If the content can vary, design the background for a safe range or use a solid text surface.
If a gradient is animated, review its full cycle rather than pausing at a convenient frame. A moving color field can pass through lower-contrast combinations that are absent from the opening state. Consider whether motion adds useful information; if it is decorative, provide a reduced-motion treatment and keep text contrast stable throughout the animation. Do not depend on the user catching a brief readable moment.
Gradients can also interact with browser rendering and color management. A screenshot on one display is not proof that every screen will show identical colors, but the design should maintain enough contrast margin to tolerate ordinary variation. Start from a robust combination, then inspect the actual production component with its fonts, browser styles, and image assets loaded. Keep a small review record with the gradient stops, overlay, text color, tested viewport widths, and the longest copy checked. That makes future changes easier to compare: if a new image or headline is introduced, the team knows which conditions need another contrast pass instead of assuming the earlier result still applies.
Example: a landing-page hero
Imagine a hero image with a dark blue left edge, a bright sky near the center, and a product on the right. The heading sits left on desktop but wraps across the middle on mobile. White text may be readable on the desktop's dark edge and then cross the bright sky on a phone.
One solution is to keep the text within a left-side dark overlay whose width expands on narrow screens. Another is to place a dark card behind the heading on mobile and let the image remain visible around it. In both cases, check the final crop, wrapped heading, supporting text, button label, and keyboard focus. A static gradient preview alone cannot establish the result for every image crop.
A practical review workflow
- Put final copy into the component instead of testing a placeholder title.
- Inspect the exact background under each line, including gradient transitions and image regions.
- Check all relevant text sizes and interactive states, not just the largest heading.
- Use an overlay, panel, adjusted stops, or a new text position when contrast varies too much.
- Review the component at responsive sizes and with longer content.
- Confirm focus indicators and links remain identifiable on the same surface.
- Recheck after changing the image, gradient, crop, or content.
The Toolsnix Gradient Generator can help create a CSS gradient, and the Contrast Checker can evaluate selected color pairs. For an image or multi-stop gradient, use these as design aids and inspect the rendered composition at the actual copy locations.
Common mistakes
- Checking only the gradient endpoints: Contrast can be weakest between stops or underneath only part of a word.
- Using one screenshot at one width: Responsive cropping and line wrapping change the background beneath text.
- Adding a subtle shadow and assuming the problem is fixed: A shadow may help edges but does not make every background region suitable.
- Using a partially transparent overlay without checking the image beneath: The composite depends on the image and overlay values.
- Rendering text inside a background image: It prevents flexible resizing and can make the text inaccessible to assistive technology.
- Testing only the heading: Supporting copy, links, and buttons may use different sizes and colors.
Frequently asked questions
How do I make white text readable on a gradient?
Keep the gradient dark enough under the full text block, move the text to a consistently dark area, or add a dark overlay or panel. Test the actual responsive composition rather than one sampled stop.
Can a text shadow fix low contrast?
A shadow may improve edge separation in some designs, but it is not a reliable substitute for a suitable foreground and background. Test the rendered text against the applicable contrast criteria.
Do I need to test every point in a gradient?
You need to ensure the text remains legible throughout the area it occupies. Sampling representative points can identify problems, but a single check at a stop cannot prove the entire text block has adequate contrast.
Is text over a gradient accessible?
It can be, if the relevant text and interface information remain distinguishable and the rest of the accessibility requirements are met. A gradient does not automatically fail or pass; inspect the actual colors, content, and states.
Should I put text directly on top of an image?
You can, but use a stable treatment such as an overlay or panel when image variation makes the text difficult to read. Check different crops and viewport sizes, especially when the image subject can move behind the copy.
Next step
Place your real heading, supporting text, and controls over the final gradient or image, then review them at desktop and phone widths. If any part of the text crosses a low-contrast area, adjust the composition or give the copy a stable surface before shipping.