Generators

Color Contrast Checker

Check contrast ratios against WCAG AA and AAA accessibility standards. Test any foreground/background color combination.

Contrast Ratio

—

The quick brown fox jumps over the lazy dog

Foreground (Text)

Background

Quick pairs:

Frequently Asked Questions

What WCAG contrast requirements does this tool check?

The tool checks contrast ratios against WCAG 2.1 Level AA and Level AAA standards. AA requires a minimum ratio of 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. AA compliance is the legal standard in most accessibility regulations.

What counts as large text for contrast purposes?

Under WCAG guidelines, large text is defined as 18pt (24px) or larger for regular weight text, or 14pt (approximately 18.67px) or larger for bold text. Text smaller than these thresholds must meet the stricter 4.5:1 contrast ratio for AA compliance.

My color combination fails AA — how do I fix it?

Darken the foreground text color or lighten the background until the contrast ratio reaches 4.5:1. The tool updates the ratio in real time as you adjust colors. A common fix is switching from medium gray text on white to a darker shade — #767676 is the lightest gray that passes AA on a white background.

What is WCAG AA compliance?

WCAG AA (Level 2) requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). This is the standard required by most accessibility laws including the ADA, EN 301 549 and WCAG 2.1.

What is WCAG AAA compliance?

WCAG AAA (Level 3) is the highest standard, requiring 7:1 for normal text and 4.5:1 for large text. While ideal, AAA is not always achievable for all text and is not legally required.

What counts as large text?

Text is considered large if it is 18pt (24px) or larger, or 14pt bold (approximately 18.67px bold) or larger. Large text has lower contrast requirements because it is inherently easier to read.

Why colour contrast matters

Text that is too close in colour to its background is hard to read for people with low vision or colour blindness, for older readers, and for anyone using a phone in bright sunlight. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios. This checker calculates the ratio for any foreground and background pair and shows whether it passes levels AA and AAA.

The thresholds

AA, normal text: at least 4.5:1.
AA, large text (24px, or 18.66px bold, and larger): at least 3:1.
AAA, normal text: at least 7:1.
AAA, large text: at least 4.5:1.
Icons, input borders and focus outlines: at least 3:1 against the colours next to them.

Ratios run from 1:1, the same colour twice, to 21:1, black on white.

Common problems

Light grey captions and placeholders. Grey such as #999 on white is only about 2.8:1, which fails AA.
Text over photos. The ratio changes across the image. Add a dark overlay or a solid panel behind the text.
Dark mode. Check both themes. A colour that works on white can fail on near-black.
Bright brand colours. They often fail as body text. Use them for large headings or buttons, and a darker shade for small text.

Beyond the ratio

Do not rely on colour alone to carry meaning; add an icon or a word to error messages and links as well. To find or convert a colour, use the colour picker.