Color Contrast Checker
Check accessibility contrast ratios
Normal Text (16px)
The quick brown fox jumps over the lazy dog.
Large Text (Bold 18px+)
Accessible Design is Good Design.
UI Component Example
Check the contrast ratio between foreground and background colors to ensure your design is accessible and meets WCAG AA/AAA standards.
How to Use This Color Contrast Checker
- 1Select a foreground (text) color using the color picker or enter a HEX code.
- 2Select a background color.
- 3View the calculated contrast ratio immediately.
- 4Check the WCAG AA/AAA badges to see if your color combination is accessible.
- 5Use the preview section to visualize the text on the background.
- 6Click the swap button to reverse foreground and background colors.
Features
- ✓Real-time Contrast Ratio Calculation
- ✓WCAG AA & AAA Pass/Fail Status
- ✓Preview for Normal and Large Text
- ✓UI Component Preview
- ✓Support for Hex Color Codes
- ✓One-click Color Swap
What is the Color Contrast Checker?
The Color Contrast Checker is a tool designed to help designers and developers ensure their text is readable against its background. Accessibility is a key part of web design, and the Web Content Accessibility Guidelines (WCAG) define specific contrast ratios that text must meet to be considered accessible to users with visual impairments. This tool calculates the contrast ratio between two colors and tells you if it passes WCAG AA and AAA standards for both normal and large text.
Frequently Asked Questions
Related Tools
💡 Did you know? You can bookmark this tool for offline access in some browsers.