Color Contrast Checker
Check WCAG contrast compliance between two colors with live preview.
Foreground
Background
The quick brown fox jumps over the lazy dog
Normal text sample at 16px for WCAG evaluation.
Large Text Sample
Contrast Ratio
14.63:1
WCAG AA
WCAG AAA
How to Use Color Contrast Checker
Step 1
Choose a foreground (text) color using the color picker or hex input.
Step 2
Choose a background color using the second color picker.
Step 3
View the contrast ratio and WCAG pass/fail results instantly.
Step 4
Use the swap button to exchange foreground and background colors.
Features
Real-time WCAG contrast ratio calculation.
Pass/fail badges for AA and AAA at normal and large text sizes.
Live preview showing text on the selected background.
Swap button to quickly reverse foreground and background.
Completely free with no sign-up required.
FAQ
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure readability. AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (18.66px) or larger for bold weight.
Pass means your color combination meets the WCAG requirement for that level and text size. Fail means the contrast is too low and may cause readability issues for some users.
Yes. Click the swap button between the two color pickers to exchange the foreground and background colors.