Color Contrast Checker
Check WCAG color contrast ratios between foreground and background colors.
About This Tool
Color Contrast Checker is a free online WCAG accessibility tool that calculates the contrast ratio between any two colors and shows whether the combination passes WCAG 2.0 AA and AAA compliance standards. Enter HEX values or use the visual color pickers, and get an instant pass/fail result for both normal and large text thresholds.
The contrast ratio is calculated using the WCAG 2.0 relative luminance formula, which models human visual perception of different wavelengths. The result is displayed alongside a live text preview so you can see exactly how the color combination will look in practice. WCAG AA (4.5:1 for normal text) is the standard required by most accessibility regulations globally.
Color Contrast Checker is essential for web designers, frontend developers, UI/UX teams, and anyone building WCAG-compliant products. It is particularly valuable during design token definition, brand color selection, and accessibility audit cycles — helping teams choose color combinations that are readable for users with low vision or color deficiencies.
Aa
The quick brown fox jumps over the lazy dog
0123456789 !@#$%^&*()
Contrast Ratio
Excellent
Accessible for all text sizes and users
WCAG AA
WCAG AAA
How to Use
- 1
Enter the foreground (text) color and the background color as HEX values or use the color pickers.
- 2
View the calculated contrast ratio and whether it passes WCAG AA and AAA standards.
- 3
Adjust colors until the desired accessibility level is achieved.
- 4
Use the Swap button to reverse foreground and background colors to test the inverse combination.
- 5
Record compliant color pairs in your design system or style guide for consistent accessible use.
Features
WCAG 2.0 Compliant
Calculates contrast ratios using the official WCAG 2.0 relative luminance formula.
AA & AAA Pass/Fail
Shows pass or fail for both WCAG AA (4.5:1) and AAA (7:1) levels for normal and large text.
Color Picker Support
Use the visual color picker or enter HEX values to set foreground and background colors.
Live Preview
See a live text preview rendered with your chosen colors to visualize the actual contrast.
Common use cases
- ›Verify that text and background color combinations in your design system meet WCAG AA standards.
- ›Test button, link, and UI element colors for accessibility compliance before development.
- ›Audit existing website color palettes for accessibility issues during a design review.
- ›Select accessible brand colors that pass WCAG AA to ensure readability for all users.
FAQ
What are WCAG contrast requirements?
AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal and 4.5:1 for large text.
How is contrast ratio calculated?
Using the WCAG 2.0 relative luminance formula that accounts for human perception of different colors.
What counts as 'large text' in WCAG?
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (18.67px) or larger for bold text. Large text has a lower contrast threshold because it is easier to read at lower contrast.
What is the minimum contrast ratio for WCAG AA compliance?
4.5:1 for normal-size body text, and 3:1 for large text (18pt+ regular, 14pt+ bold). WCAG AA is the standard required by most accessibility regulations including WCAG 2.1, ADA, and EN 301 549.
Does passing WCAG AA guarantee my design is accessible?
Contrast ratio is one factor. Accessible design also includes font size, line spacing, clear labeling, keyboard navigation, and other considerations. Passing AA contrast is a necessary but not sufficient condition for accessibility.