Choosing accessible text colour over a gradient
Putting text directly on top of a gradient looks great in a mockup and then fails in real use the moment the gradient shifts from a light stop to a dark one under the same line of text. Getting this right means checking contrast against the whole gradient, not just one spot. Here is how to do it properly.
Why a single contrast check is not enough
Standard contrast guidance, the WCAG rules that most accessibility checks are built on, compares one text color against one background color and produces a ratio: 4.5:1 for normal text at AA, 3:1 for large text at AA, and 7:1 for AAA. That works fine for a solid background. A gradient is not one color, though; it is a continuous range, and your text sits on top of all of it at once. White text that reads perfectly over the dark end of a gradient can become nearly invisible by the time it crosses into the light end.
Find the worst case, not the average
The fix is to treat the lightest and darkest points your text will actually cross as two separate backgrounds and check contrast against both. If your text only ever sits in one region of the gradient (a heading pinned near one edge), you only need to check that region. If text spans the full gradient (a long line of body copy over a wide background), check both extremes and make sure your chosen text color clears the minimum ratio against the harder of the two.
Practical strategies
Pick a text color after picking the gradient, not before. Decide the gradient's overall range first, then test both black and white text against its lightest and darkest stops to see which one, if either, holds up across the whole range.
Narrow the gradient's lightness range. If neither black nor white text passes cleanly, the gradient itself may be too high contrast internally, swinging from very light to very dark. Tightening that range so it stays mostly light or mostly dark keeps one text color valid the whole way across.
Use a scrim behind the text. When the gradient must span a wide range and you cannot compromise on the text color, add a semi-transparent solid overlay (typically black or white) directly behind the text. This levels out the contrast locally without changing the gradient shown elsewhere on the page.
Check both ends, every time. It is easy to eyeball a gradient and assume it is fine because the middle looks good. The failure almost always shows up right at an edge, so make checking the extremes a habit rather than a one-off gut check.
Check it properly
Do not guess. Compute the actual ratio between your text color and each end of the gradient, and confirm which WCAG level you clear. The color editor includes pairwise WCAG contrast ratios alongside shade, saturation, and colorblind simulation, so you can check a candidate text color against every stop in your palette before committing to it.