Color Contrast Checker

Compare two solid colors and check their contrast ratio against WCAG AA text thresholds.

Calculated Result

—

Enter your values and calculate.

Simple to use

Get results in seconds

Clear formulas

Understand your results

Works on any device

Mobile, tablet or desktop

How to Use the Color Contrast Checker

Choose the text color and the solid background color it will sit on, then select Calculate. Read both the ratio and the normal-text or large-text assessment. Test each important text/background pair separately, including states that change colors.

Formula and Explanation

Ratio = (Lighter luminance + 0.05) ÷ (Darker luminance + 0.05)

The checker converts sRGB channels to linear light, then calculates relative luminance as 0.2126R + 0.7152G + 0.0722B. The lighter and darker luminances are inserted into the contrast formula. WCAG AA uses at least 4.5:1 for normal text or 3:1 for large text.

The tool compares solid opaque colors only. It does not evaluate text over images, gradients or transparency, nor does a passing ratio establish that an entire page is accessible. It reports AA text contrast rather than a complete WCAG audit.

W3C: Understanding Contrast (Minimum)

Worked Example

Black text on white has a 21:1 ratio, the maximum for these colors. Gray #777777 on white is about 4.48:1 and fails the 4.5:1 normal-text threshold. A displayed ratio is rounded, but the pass/fail assessment uses the unrounded value.

Frequently Asked Questions

What counts as large text for the 3:1 threshold?

WCAG defines large text as at least 18 points at regular weight or at least 14 points in bold. Smaller text needs at least 4.5:1 for the AA contrast check.

Does 4.48:1 pass when it rounds close to 4.5?

No. A ratio below the threshold does not pass. The checker uses the full calculated value for its assessment and rounds only the ratio it displays.

Can I test a transparent color or background image?

Not directly. This tool accepts two solid colors. For transparency, determine the final composited color; for an image, assess the actual colors behind the text in its different positions.

Does a passing result mean my page is accessible?

No. It checks one text/background pair against AA text contrast thresholds. Keyboard access, labels, structure, focus visibility and other requirements need separate checks.