Color contrast check
Color contrast checker
Enter text and background colors to calculate WCAG AA / AAA contrast live.
Passing a ratio does not make every size, weight, or context automatically accessible
Foreground & background
See two colors clearly before using them
Contrast updates live using the WCAG relative-luminance formula.
Contrast result
14.25:1This sentence checks whether body text is easy to read. Aa 123
Methods & limits
Contrast compares relative luminance, not distance around the hue wheel
Both colors convert to linear RGB and then relative luminance. The lighter and darker luminances become a ratio from 1:1 to 21:1.
Normal body text needs 4.5:1 for AA; large text may use 3:1. Color is only part of readability—size, weight, spacing, and the real display still matter.
Contrast = (lighter relative luminance + 0.05) ÷ (darker relative luminance + 0.05).
FAQ
Color contrast checker · FAQ
What is the difference between AA and AAA?
AAA is stricter. Normal text needs 4.5:1 for AA and 7:1 for AAA; large text needs 3:1 and 4.5:1.
What counts as large text?
Common guidance is at least 24px regular or about 18.66px bold; validate the actual font and platform.
Why can red and green look different but fail?
Different hues may have similar luminance. Hue alone can also fail users with color-vision differences, so pair status colors with text or shape.