WCAG 2.2 Gradient Color Contrast Checker

Most contrast tools only handle solid background colors. This tool checks contrast for CSS gradientsby sampling the rendered element from 0% to 100%, reporting the worst-case contrast ratio, and also showing the result at your exact text position.

Gradient supportWorst-case samplingAA / AAA checksShareable links

Share this exact check

The link captures mode, colors, gradient stops, sampling, and text position.

Inputs

Pick colors from image

Upload a screenshot or asset to extract colors

Hex format like #546177 or 546177 (3- or 6-digit).

Hex format like #546177 or 546177 (3- or 6-digit).

CSS angle for linear-gradient(). 180deg = top to bottom.

Smaller = more accurate but slightly slower. 1% is usually fine.

Any percent value (can be negative or greater than 100).

Any percent value (can be negative or greater than 100).

Computed CSS:

linear-gradient(180deg, #ffffff 0%, #bac7e7 100%)

Results

Worst-case ratio across gradient: 3.70:1 (at 100%)

Worst-case

3.70:1

Overall (worst-case across rendered element)

Uses the minimum contrast sampled from 0% to 100% of the element.

Ratio

3.70:1

CriterionResultThreshold
Normal text — AA (at least 4.5:1)Fail4.5:1
Normal text — AAA (at least 7:1)Fail7.0:1
Large text — AA (at least 3:1)Pass3.0:1
Large text — AAA (at least 4.5:1)Fail4.5:1
UI components / graphics (at least 3:1)Pass3.0:1

At text position

Computed at the preview’s text start location (padding-top 20px). Mapped to ~12.82% along the gradient. Background there: #f6f8fc.

Ratio

5.88:1

CriterionResultThreshold
Normal text — AA (at least 4.5:1)Pass4.5:1
Normal text — AAA (at least 7:1)Fail7.0:1
Large text — AA (at least 3:1)Pass3.0:1
Large text — AAA (at least 4.5:1)Pass4.5:1
UI components / graphics (at least 3:1)Pass3.0:1
Worst background
#bac7e7
at 100%
Best background
#ffffff
at 0%
Text position background
#f6f8fc
at ~12.82%
Sparkline shows sampled contrast ratios across the gradient (0% to 100%).

Preview

Configure preview dimensions and text to match your actual layout.

This changes the preview’s padding-top and also drives the 'At text position' calculation.

Preview size: 1424×156
Text position mapped to 12.82% along the gradient.

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog. (Large/bold)

UI sample:(UI components generally need at least 3:1)

Gradient Color Contrast Accessibility

Most WCAG color contrast tools only support solid background colors. In real user interfaces, designers frequently use CSS gradients for hero sections, buttons, cards, navigation bars, and marketing layouts. When text sits on top of a gradient, the contrast ratio can vary across the element.

This tool samples the rendered gradient from 0% to 100% and calculates the worst-case contrast ratio. That worst-case value determines whether the design passes AA/AAA requirements everywhere the text could appear.

WCAG 2.2 Contrast Requirements

  • Normal text AA: 4.5:1 contrast ratio
  • Normal text AAA: 7:1 contrast ratio
  • Large text AA: 3:1 contrast ratio
  • Large text AAA: 4.5:1 contrast ratio
  • UI components and graphics: 3:1 contrast ratio

The page also computes contrast at your exact text position (based on preview padding) so you can replicate a real layout—like a hero headline that starts 80px down from the top.

FAQ

Can WCAG contrast be checked on gradient backgrounds?

Yes. When text sits on a gradient, contrast varies across the element. This tool samples the rendered gradient from 0% to 100% and reports the worst-case (minimum) contrast ratio, plus a calculation at the exact text position shown in the preview.

What WCAG 2.2 contrast ratio is required for normal text?

WCAG requires at least 4.5:1 for normal text at Level AA, and 7:1 for Level AAA. Large text has a lower threshold (3:1 for AA).

Why do many contrast checkers fail for gradients?

Most tools accept a single background color. A gradient contains many intermediate colors between stops, so checking only the start/end colors can miss low-contrast regions in the middle.

How does the gradient sampling work?

For linear gradients, the tool samples points across the rendered element from 0% to 100% and computes contrast at each point using the WCAG relative luminance formula. The reported worst-case ratio is the minimum across those samples.

Does this support negative or greater-than-100% stop positions?

Yes. CSS allows stop positions outside 0–100%. The tool supports those values and still evaluates contrast across the rendered element from 0% to 100%.

Is the OpenGraph image fully crawlable by Google?

The tool generates an OpenGraph preview image client-side for sharing. For maximum SEO/social reliability, also generate a static og:image on the server/build pipeline and set it in your HTML head.