Color Contrast Checker
Foreground (Text) Color
Background Color
Preview
Normal text (18px)
Large text (24px bold)
Let us know
Please share your experience
Similar Tools
About Color Contrast Checker
Check WCAG AA/AAA compliance and contrast ratios for text and background colors. Free accessibility tool.
How to Use
Step 1
Enter or pick a foreground (text) color using HEX code or color picker
Step 2
Enter or pick a background color using HEX code or color picker
Step 3
View the contrast ratio calculated in real-time
Step 4
Check WCAG AA and AAA compliance for normal and large text
Step 5
See visual preview of text on background
Step 6
If contrast fails, use suggested colors for better accessibility
Step 7
Use 'Swap Colors' to reverse foreground and background
Features & Benefits
- ✅Real-time contrast ratio calculation
- ✅WCAG 2.1 AA and AAA compliance checking
- ✅Separate checks for normal text and large text
- ✅Visual preview of text on background
- ✅Color pickers for easy color selection
- ✅HEX color input with validation
- ✅Swap colors button for quick testing
- ✅Random color generators
- ✅Automatic suggestions for failing contrasts
- ✅Shows required ratios (4.5:1, 3:1, 7:1, 4.5:1)
- ✅Pass/fail indicators with checkmarks
- ✅100% browser-based - no server upload
- ✅100% free - no watermarks, no signup required
FAQs
What is color contrast ratio?
Color contrast ratio measures the difference in luminance between two colors, expressed as a ratio like 4.5:1. Higher ratios mean better contrast. It's calculated using the WCAG 2.1 formula based on relative luminance of each color.
What are WCAG AA and AAA standards?
WCAG (Web Content Accessibility Guidelines) defines two conformance levels: AA (minimum) requires 4.5:1 for normal text and 3:1 for large text. AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text. Most websites aim for AA compliance.
What is considered large text?
Large text is defined as 18pt (24px) or larger, or 14pt (18.66px) or larger if bold. Large text has lower contrast requirements (3:1 for AA, 4.5:1 for AAA) because it's easier to read.
Why does my design fail contrast checks?
Common reasons include: using light text on light backgrounds, dark text on dark backgrounds, or colors with similar luminance. Even colors that look different to you might have poor contrast. Always test with a contrast checker.
Should I aim for AA or AAA compliance?
WCAG AA is the legal requirement for most websites and is considered the minimum standard. AAA is recommended for enhanced accessibility, especially for sites serving elderly users or those with vision impairments. Start with AA and aim for AAA where possible.
Can I use any colors if contrast is good?
Good contrast is essential but not sufficient. Also consider color blindness (use our Color Blind Simulator), avoid relying solely on color to convey information, and ensure colors work well together in your overall design.
What if I can't achieve good contrast with my brand colors?
Try adjusting the shade (lighter or darker), use your brand color for accents rather than text, add borders or backgrounds, or use the suggestions feature to find the closest accessible alternative. Brand colors can often be adjusted slightly without losing identity.
Do I need to check every color combination?
Check all text-on-background combinations, especially body text, headings, links, buttons, and form inputs. Also check hover and focus states. Icons and graphics that convey information should also meet contrast requirements.
Is 21:1 the maximum contrast ratio?
Yes, 21:1 is the maximum possible contrast ratio, achieved by pure black (#000000) on pure white (#FFFFFF) or vice versa. This represents the highest possible contrast.