Color Contrast Checker
Check WCAG color contrast ratios for your text and background colors. Results update in real time.
Sample TextThe quick brown fox jumps over the lazy dog
17.40:1
WCAG AA
Normal text(4.5:1)
Large text(3:1)
WCAG AAA
Normal text(7:1)
Large text(4.5:1)
How it works
This tool calculates the contrast ratio between two colors using the WCAG 2.1 relative luminance formula. It linearizes each sRGB channel, computes luminance as L = 0.2126R + 0.7152G + 0.0722B, then derives the ratio (L1 + 0.05) / (L2 + 0.05). Results update instantly as you pick colors.
WCAG compliance levels
- AA Normal text requires a minimum ratio of 4.5:1
- AA Large text (18px+ or 14px+ bold) requires 3:1
- AAA Normal text requires a minimum ratio of 7:1
- AAA Large text requires 4.5:1
Why contrast matters
Sufficient color contrast ensures text is readable for people with low vision and color deficiencies. Meeting WCAG contrast guidelines is also a requirement for ADA and Section 508 compliance.