Contrast Checker
Check color contrast ratios for accessibility compliance. Supports WCAG 2.1 AA/AAA and APCA standards. Test single pairs, bulk check multiple combinations, and get suggestions to improve accessibility.
Select Colors
Accessible Presets
Contrast Ratio
21.00:1
Normal Text
Level AA (4.5:1)
✓ Pass
Normal Text
Level AAA (7:1)
✓ Pass
Large Text
Level AA (3:1)
✓ Pass
Large Text
Level AAA (4.5:1)
✓ Pass
UI Components
Level AA (3:1)
✓ Pass
Live Preview
Large Text (24px)
Normal Text (16px): The quick brown fox jumps over the lazy dog. This is how your regular text will appear with these colors.
Small Text (14px): Even smaller text like fine print or captions.
Recommended Settings
WCAG Compliance Levels
- •AA Normal Text requires 4.5:1 minimum contrast ratio
- •AAA Normal Text requires 7:1 for enhanced accessibility
- •Large Text (18pt+) needs only 3:1 for AA compliance
- •UI components and graphics need 3:1 minimum
- •Higher contrast improves readability for everyone
APCA vs WCAG 2.1
- •APCA uses perceptual lightness for more accurate measurement
- •Considers polarity (light-on-dark vs dark-on-light)
- •Bronze (60) is minimum, Silver (75) is recommended
- •Gold (90) provides maximum readability
- •Future standard for accessibility compliance
Pro Tips
- •Test with both WCAG and APCA for comprehensive accessibility
- •Darker text on lighter backgrounds usually passes more easily
- •Use suggestions feature to quickly find compliant alternatives
- •Export bulk checks for design system documentation
Most Popular
Check all primary brand colors against white and dark backgrounds for AA compliance
When to Use This Tool
Verify that your website or app meets WCAG 2.1 Level AA or AAA standards for text contrast. Essential for legal compliance, government contracts, and ensuring your product is accessible to users with visual impairments.
Build accessible color palettes for your design system by testing all text/background combinations. Use bulk checker to validate entire palettes at once and export results for documentation.
Conduct comprehensive accessibility audits by checking all color combinations across your application. Identify non-compliant areas and get suggestions for improvements to meet accessibility standards.
Test colors using the Advanced Perceptual Contrast Algorithm (APCA), the future standard for contrast measurement. Ensure your designs will meet upcoming accessibility requirements before they become mandatory.
How It Works
Select foreground (text) and background colors using color pickers or enter HEX codes directly
Choose between WCAG 2.1 mode for current standards or APCA mode for advanced perceptual contrast measurement
View real-time contrast ratios and pass/fail indicators for all compliance levels (AA, AAA, Bronze, Silver, Gold)
See live previews of your colors at different text sizes to verify readability
If colors fail, use the suggestions feature to find compliant alternatives automatically
For multiple checks, use Bulk Checker mode to test many pairs at once and export results to JSON or CSV
100% Private
Files never leave your device. All processing happens locally in your browser.
Lightning Fast
Powered by Pure JavaScript for optimal performance on modern browsers.
Secure
No data collection, no tracking, no sign-up required.
Frequently Asked Questions
What's the difference between WCAG 2.1 and APCA?
WCAG 2.1 is the current web accessibility standard using contrast ratios (like 4.5:1). APCA (Advanced Perceptual Contrast Algorithm) is a newer method that measures perceptual lightness difference, considering how humans actually perceive contrast. APCA is more accurate but not yet widely adopted as a legal standard.
What does Level AA vs AAA mean?
Level AA is the minimum legally required contrast for most accessibility compliance (4.5:1 for normal text, 3:1 for large text). Level AAA is enhanced compliance with higher requirements (7:1 for normal text, 4.5:1 for large text) that provides better accessibility for users with low vision or color blindness.
How does the suggestion feature work?
When your color pair fails WCAG AA, the tool automatically generates alternative colors by darkening the foreground or lightening the background until the 4.5:1 ratio is met. You can apply any suggestion with one click to instantly get compliant colors.
What counts as 'large text' in WCAG?
Large text is defined as 18pt (24px) regular weight or 14pt (18.66px) bold weight. Large text has lower contrast requirements (3:1 for AA instead of 4.5:1) because bigger text is easier to read even at lower contrast levels.
Can I check an entire color palette at once?
Yes! Use the Bulk Checker mode to add multiple foreground/background pairs and check them all simultaneously. You can export the results to JSON or CSV for documentation or sharing with your team.
Do I need to pass both WCAG and APCA?
Currently, only WCAG 2.1 is legally required for accessibility compliance. APCA is recommended for future-proofing your designs as it will likely become the standard in WCAG 3.0. Testing with both gives you comprehensive coverage of current and future requirements.