Color Contrast Checker

Check color contrast ratio for WCAG AA and AAA compliance. Enter foreground and background colors.

Text Color (Foreground)

Background Color

WCAG Contrast Requirements

Level	Normal Text	Large Text
AA (minimum)	4.5:1	3:1
AAA (enhanced)	7:1	4.5:1

Large text = 18pt+ regular or 14pt+ bold (approximately 24px and 18.67px respectively)

Why Contrast Matters

Text that's too close in brightness to its background is hard to read, especially for users with low vision. The Web Content Accessibility Guidelines (WCAG) set a measurable standard: the contrast ratio between text and background must be at least 4.5:1 for normal text and 3:1 for large text to meet level AA. This checker calculates the ratio for any two colors and tells you which levels you pass.

AA vs AAA

Level AA is the common legal and practical target. The stricter AAA level asks for 7:1 (normal) and 4.5:1 (large) and is recommended where readability is critical. "Large text" means roughly 18.66px bold or 24px regular and above.

Fixing Failing Contrast

If a pair fails, darken the text or lighten the background rather than changing hue — contrast depends on brightness, not color. Grab exact values with the color picker or convert them with hex to RGB.

Frequently Asked Questions

What is the WCAG contrast ratio requirement?

WCAG 2.1 requires a minimum contrast ratio of 4.5:1 for normal text (AA level) and 3:1 for large text (18pt or 14pt bold). AAA level requires 7:1 for normal text and 4.5:1 for large text.

How is color contrast ratio calculated?

Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. Maximum ratio is 21:1 (black on white).

Why does color contrast matter?

Poor contrast makes text hard to read for people with low vision or color blindness. About 8% of males have some form of color vision deficiency. High contrast also benefits users in bright sunlight.