Design

Contrast Checker

Check foreground and background color contrast against WCAG AA and AAA accessibility standards. See the contrast ratio and pass/fail for normal and large text.

Colors
Foreground (Text)
Background
Large Text Sample (18pt / 14pt bold)
Normal text sample — this is how your text looks on the background.
Small text at 13px for reference.
Results
—
Contrast Ratio
Presets

Frequently Asked Questions

What is color contrast in accessibility?

Color contrast refers to the difference in light between a font (or foreground element) and its background. Good contrast ensures that text is readable for everyone, including people with moderate visual impairments or color blindness.

What is a good WCAG contrast ratio?

According to the Web Content Accessibility Guidelines (WCAG) 2.1, standard text must have a contrast ratio of at least 4.5:1 to meet the AA requirement. Large text (typically 18pt or 14pt bold) requires a minimum ratio of 3:1.

What is the difference between AA and AAA contrast standards?

WCAG AA is the standard legal baseline for most web accessibility requirements, demanding a 4.5:1 ratio for normal text. AAA is a stricter, enhanced standard that is required for specialized audiences, demanding a 7:1 ratio for normal text and 4.5:1 for large text.

How is the contrast ratio calculated?

The contrast ratio is calculated mathematically using the relative luminance of the two colors. The formula produces a range from 1:1 (no contrast, e.g., white text on a white background) to 21:1 (maximum contrast, e.g., black text on a white background).