Color Contrast Checker
Check color contrast ratios for WCAG 2.1 AA/AAA compliance. Test text and background colors, simulate color blindness, and audit full palettes.
Choose Colors
Live Preview
Normal text (16px) - The quick brown fox jumps over the lazy dog.
Large text (18px bold) - The quick brown fox jumps over the lazy dog.
Large text (24px) - The quick brown fox jumps.
0
Contrast Ratio
0
WCAG Level
0
Rating
WCAG Compliance
AA Normal
4.5:1 required
AA Large
3:1 required
AAA Normal
7:1 required
AAA Large
4.5:1 required
Color Blindness Simulation
Protanopia (No Red)
Sample text preview
Deuteranopia (No Green)
Sample text preview
Tritanopia (No Blue)
Sample text preview
Achromatopsia (No Color)
Sample text preview
Palette Audit
| Color 1 | Color 2 | Ratio | AA | AAA |
|---|
Frequently Asked Questions
What contrast ratio is required for WCAG compliance?▾
WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text.
How is contrast ratio calculated?▾
Contrast ratio is calculated using the relative luminance of two colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color luminance and L2 is the darker. A ratio of 1:1 is no contrast (same color) and 21:1 is maximum (black on white).
What is color blindness simulation?▾
This tool simulates how your color combinations appear to people with different types of color vision deficiency: protanopia (no red), deuteranopia (no green), tritanopia (no blue), and achromatopsia (no color).
Is my data safe?▾
Yes. All contrast calculations and color blindness simulations happen entirely in your browser. No data is sent to any server.