How to Check Contrast on Gradient Backgrounds

On a webpage with a gradient background, white text may be clear on the left but almost disappear on the right. A gradient cannot be evaluated as though it were one flat color: the important question is what lies immediately behind each line of text. This guide uses an event registration banner to show where to measure, how to interpret contrast ratios, and how to adjust the design.

Check the color behind the text at each position

A contrast ratio measures the difference in relative luminance between text and its background. In CSS (Cascading Style Sheets, the rules that control a webpage’s appearance), linear-gradient() creates a background that changes continuously between defined colors. Checking only the starting or ending color does not tell you whether text is readable at intermediate positions.

WCAG 2.2 (Web Content Accessibility Guidelines, international guidelines for making web content accessible) Success Criterion 1.4.3 at Level AA generally requires at least 4.5:1 contrast for normal-sized text and 3:1 for qualifying large text. When letters cross a change in color, evaluate the background directly behind them. Small event dates and the words on registration buttons need attention just as much as prominent headings.

The area to inspect is the portion of the gradient underneath the actual text, not necessarily the entire background. If the copy stays on the left, concentrate on the left-hand region. If a sentence stretches across the banner, check both its dark and light surroundings as well as the colors between them.

Compare the left, middle, and right of an event banner

Imagine a registration banner with dark navy ■#182D48 at the left edge, blue-gray ■#7288A1 in the center, and pale blue ■#DCE9F5 at the right edge. These are HEX colors (six-digit hexadecimal codes). One CSS implementation is linear-gradient(to right, rgb(24 45 72) 0%, rgb(114 136 161) 50%, rgb(220 233 245) 100%). RGB specifies colors using their red, green, and blue components.

Against white text ■#FFFFFF, the left-hand dark navy ■#182D48 has approximately 13.93:1 contrast, the center blue-gray ■#7288A1 has 3.65:1, and the right-hand pale blue ■#DCE9F5 has 1.23:1. White letters are clearly separated from the dark side, but the center and right do not reach the 4.5:1 requirement for normal-sized text. It would be misleading to describe the entire banner as readable simply because the left side works.

Changing the text to dark blue ■#14283E does not solve the problem everywhere. Its ratios are approximately 1.07:1 on the left ■#182D48, 4.10:1 in the center ■#7288A1, and 12.13:1 on the right ■#DCE9F5. It works on the pale side, but not at the other two sample positions for normal-sized text. A single switch from light to dark lettering can simply move the problem elsewhere.

If text needs to extend across the full width, another approach is to keep the gradient entirely within darker blues. For example, a gradient from deep blue ■#17324C to muted blue ■#365A76 provides approximately 13.15:1 and 7.29:1 contrast, respectively, against white ■#FFFFFF at its two endpoints. Even with this more promising palette, verify the intermediate colors where text actually appears in the finished layout.

Fix weak areas and test before publishing

First identify the text size and the applicable threshold: normally 4.5:1, or 3:1 where the text qualifies as large. Then inspect the left, middle, and right underneath the text, including places where the background changes noticeably, to find the weakest contrast. Do not round an almost-passing value up to claim compliance; build in some margin.

If the contrast is inadequate, place the copy over the darker portion only, move the position of a lighter color stop, or introduce a solid, opaque panel immediately behind the letters. A panel in deep blue ■#17324C, for example, has approximately 13.15:1 contrast with white ■#FFFFFF. That ratio applies to text actually over the solid panel, not to any words outside it.

When a banner becomes narrower on a smartphone, its line breaks and the gradient colors behind the letters may change. Review headings, supporting copy, and button labels on both desktop and mobile layouts. HueRoll can check a selected color against white or black, but it does not automatically test every point in a gradient, compare any arbitrary pair of colors, or assign WCAG AA or AAA pass/fail results. Calculate the relevant pairs separately and inspect the finished design.