WCAG Color Contrast Checker
Test any text and background color pair against WCAG AA and AAA thresholds with a live preview. Accessibility compliance becomes measurable in seconds instead of a guess.
Step-by-step guide to the Color Contrast Checker
- Enter a foreground color and a background color in any common format.
- The contrast ratio computes instantly.
- Check the AA and AAA verdicts for normal and large text.
- Adjust either color until the target level passes.
Practical scenarios for the Color Contrast Checker
- Verifying body text and brand colors before launching a redesign.
- Picking link and button colors that meet AA on your background.
- Auditing a component library for WCAG compliance.
- Resolving accessibility feedback from users or auditors.
How the Color Contrast Checker works under the hood
The checker computes the WCAG contrast ratio, which ranges from 1 to 21, using the relative luminance formula from the accessibility guidelines. The thresholds are 4.5 to 1 for AA normal text, 3 to 1 for AA large text, 7 to 1 for AAA normal text, and 4.5 to 1 for AAA large text. The live preview lets you read your own words on the pair, because legibility is more than a number. Calculation runs locally, naturally.
What the Color Contrast Checker does not do
Contrast ratios cover luminance but not all perception factors; font weight, size, and rendering also influence real-world readability.
Common questions about the Color Contrast Checker
What counts as large text?
Generally text at 18.66px bold or 24px regular and above, which WCAG treats under looser thresholds.
Does the order of colors matter?
No. The ratio is the same whichever color is foreground or background.
What ratio should I aim for?
4.5 to 1 satisfies AA for body text; 7 to 1 is the AAA target for maximum legibility.
Last reviewed: October 2026.