AA Gradient Calculator

What This Gradient Contrast Checker Does

This tool evaluates whether a gradient meets the WCAG AA contrast ratio of 4.5:1 for normal text or 3:1 for large text. Gradients present a unique accessibility challenge because contrast levels shift across the color transition. A single point check at the start or end of the gradient is often misleading. This calculator samples multiple points along the gradient to identify the minimum contrast ratio, giving you a reliable pass or fail result for the entire gradient.

How the Gradient Contrast Check Works

The tool calculates contrast using the WCAG 2.1 relative luminance formula. For a gradient defined by two colors, the calculator:

• Converts both colors to their relative luminance values
• Samples the gradient at regular intervals (typically 10–20 points)
• Calculates the contrast ratio between the text color and each sampled gradient color
• Returns the lowest contrast ratio found across the entire gradient

The minimum ratio determines the pass or fail result. If any point along the gradient falls below the required threshold, the gradient fails WCAG AA compliance for that text size.

How to Use the AA Gradient Calculator

1. Select the gradient colors. Enter the start and end colors of your gradient. You can use hex, RGB, or HSL values.
2. Choose the text color. This is the color of the text that will be placed over the gradient.
3. Select the text size. Choose between normal text (under 18px or 14px bold) and large text (18px and above or 14px bold and above). The threshold changes from 4.5:1 to 3:1 for large text.
4. Run the check. The tool will sample the gradient and display the minimum contrast ratio and a pass or fail result.

Example: Checking a Gradient for Readable Text

Suppose you have a gradient from #4A90D9 (blue) to #50E3C2 (teal) and you want to place white text over it. You run the check for normal text (4.5:1 threshold). The tool samples the gradient and finds that the contrast ratio drops to 3.2:1 near the teal end. The result is a fail. To fix this, you could darken the teal end of the gradient or use a darker text color.

Understanding Your Results

The output shows:

• Minimum contrast ratio – the lowest ratio found across the gradient
• Pass or fail – based on the WCAG AA threshold for your selected text size
• Location of minimum contrast – approximately where along the gradient the lowest ratio occurs

A pass means the entire gradient is safe for that text color and size. A fail means at least one section of the gradient does not meet the minimum contrast requirement.

Common Mistakes When Checking Gradient Contrast

• Checking only the endpoints. The middle of a gradient often has lower contrast than either end. Always check the full transition.
• Ignoring text size. Large text has a lower threshold (3:1), so a gradient that fails for normal text may pass for headings.
• Using the wrong text color. White text over a light gradient will almost always fail. Consider using a darker text color or adjusting the gradient.
• Assuming a linear gradient is uniform. Even a simple two-color gradient can have significant contrast variation, especially with color stops or complex transitions.

Limitations of This Tool

• This calculator checks luminance contrast only. It does not account for color blindness, pattern interference, or other accessibility factors.
• The tool samples discrete points along the gradient. Very sharp transitions or complex multi-stop gradients may require more sampling points for accuracy.
• WCAG AA is a minimum standard. For critical content or low-vision users, consider aiming for WCAG AAA (7:1 for normal text, 4.5:1 for large text).

Practical Use Cases

• Button backgrounds. Ensure text on gradient buttons remains readable across the entire button surface.
• Hero sections. Check that overlay text on gradient backgrounds meets accessibility standards.
• Data visualizations. Verify that labels and annotations on gradient-filled charts are legible.
• Email and landing page designs. Many email clients render gradients inconsistently, but contrast requirements still apply.