Color Tools

Contrast Checker

Check whether two colors meet WCAG accessibility contrast requirements for AA and AAA compliance.

Foreground Color
Background Color
The quick brown fox jumps over the lazy dog
Small text sample (12px)
About this tool

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between foreground and background colors to ensure text is readable for people with low vision or color blindness. AA compliance is required for most websites under accessibility laws. AAA is the higher standard that makes text readable for people with more severe visual impairments.

WCAG AA: 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold). WCAG AAA: 7:1 for normal text, 4.5:1 for large text. Most design systems target AA compliance at minimum.

Frequently asked questions

Why does white text on a dark background often pass but fail on mid-tones?

Contrast ratio is relative luminance between two colors. Very dark backgrounds and white create high contrast. Mid-tone backgrounds (medium grays, medium blues) are closest in luminance to mid-tone text colors, producing the lowest ratios. The gray zone around medium values is where most contrast failures occur.

Related tools