Color Contrast Checker
Check color contrast ratio between foreground and background colors, review WCAG pass and fail states, and preview readability instantly.
Color contrast is critical for web accessibility. Text that lacks sufficient contrast against its background is hard to read — especially for users with visual impairments or on mobile screens in bright environments. This tool calculates the contrast ratio between any two colors and tells you whether they pass WCAG AA or AAA standards for both normal and large text.
Use this free color contrast checker during design reviews to catch accessibility issues before they reach production. Compare foreground and background colors, validate WCAG contrast requirements, and refine UI palettes for readability.
Colors
Contrast Result
17.74:1Aa
Frontend developers use contrast checks to keep interfaces readable.
WCAG Ratings
AA Normal Text
PassAA Large Text
PassAAA Normal Text
PassAAA Large Text
PassContrast Tips
Short comparisons and tips to help you choose the right option faster.
AA vs AAA contrast
AA is the more common accessibility target for most interfaces. AAA is stricter and can be useful for text-heavy experiences or higher accessibility standards.
Why contrast matters
Strong contrast improves readability, reduces eye strain, and helps more users successfully use text, buttons, and interface elements across devices and lighting conditions.
How to Use
Follow these quick steps to get the result you need.
Choose a foreground color and a background color using the pickers or HEX inputs.
Review the live contrast ratio and the WCAG pass or fail results for normal and large text.
Adjust or swap the colors until the sample text and ratings match the accessibility target you need.
Related Color Tools
Try these other tools in the same category.