Back to Homepage
Contrast Checker
Ensure your color combinations meet accessibility standards.
Color Inputs
Preview
Large Text (18pt / 24px bold)
Normal Text (16px)
Accessibility Results
Contrast Ratio
21.00:1
AA (Normal Text)
Pass
Ratio: 4.5:1
AAA (Normal Text)
Pass
Ratio: 7:1
AA (Large Text)
Pass
Ratio: 3:1
AAA (Large Text)
Pass
Ratio: 4.5:1
About This Tool
The Contrast Checker is an essential tool for ensuring your web content is accessible to everyone, including people with visual impairments. It calculates the contrast ratio between a text color and its background color, evaluating it against the Web Content Accessibility Guidelines (WCAG) standards. The tool provides a pass or fail status for both AA and AAA levels for normal and large text, helping you build inclusive, readable, and compliant websites.
How to Use
- Use the color pickers or enter the HEX codes for your "Text Color" and "Background Color".
- As you change the colors, the "Preview" section will update to show you how the text looks on the background.
- The "Accessibility Results" section will instantly update with the calculated contrast ratio.
- Check the status cards to see if your color combination passes WCAG AA and AAA standards for both normal and large text. A "Pass" indicates the combination is accessible for that level, while "Fail" indicates it is not.