Color Contrast Checker

Check text and background contrast against WCAG

This color contrast checker calculates the contrast ratio between a text color and a background color. It then tells you whether the pair passes the WCAG AA and AAA levels for normal and large text. A live preview shows how the colors look together.

How to use it

1. Pick a Text Color with the color picker, or type a hex code such as #1a1a1a.
2. Pick a Background Color the same way.
3. Or click a Quick Preset, like Black on White or White on Blue.
4. Read the ratio, the rating and the four pass/fail results.
5. Click Copy ratio or Copy as CSS to copy the result.

How it works

The tool follows the WCAG formula. It converts each hex color to RGB, turns each channel into linear light and works out relative luminance:

L = 0.2126 × R + 0.7152 × G + 0.0722 × B

The contrast ratio is (lighter L + 0.05) / (darker L + 0.05). It ranges from 1:1 (same color) to 21:1 (black on white). The order of the two colors does not change the ratio.

WCAG thresholds used

Check	Minimum ratio
AA Normal text	4.5:1
AA Large text	3:1
AAA Normal text	7:1
AAA Large text	4.5:1

Large text in WCAG means about 18pt (24px) regular, or 14pt (about 18.7px) bold. The tool also gives a short rating, from "AAA (Excellent)" down to "Fail (Very poor)".

Tips

• Hex codes must start with # and have 3 or 6 digits. RGB and HSL values are not accepted.
• The preview includes an inverted strip, so you can also judge the colors swapped.
• Copy as CSS gives you color and background-color lines ready to paste.
• All checks run in your browser. No colors are sent anywhere.

Frequently asked questions

What contrast ratio do I need for WCAG AA?

At least 4.5:1 for normal text and 3:1 for large text. AAA asks for 7:1 and 4.5:1.

Does the order of the colors matter?

No. The formula always divides the lighter color by the darker one, so swapping them gives the same ratio.

Can I check transparent colors?

No. The tool reads solid hex colors only, without an alpha channel. Use the final blended color for semi-transparent text.