Color Contrast Checker
Ensure inclusive design with precision color contrast analysis meeting WCAG accessibility guidelines. Vital for web developers, UI/UX designers, and accessibility advocates seeking compliant color combinations with intelligent improvement recommendations.
Continue Your Colors Journey
What is Color Contrast Checker?
The Color Contrast Checker calculates the contrast ratio between a foreground and background color and checks it against WCAG 2.1 accessibility guidelines. It reports whether the combination passes AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 for normal text, 4.5:1 for large text). A visual preview shows the text on the background. All processing happens in the browser.
How does Color Contrast Checker work?
This tool computes relative luminance for each color using the WCAG formula, then calculates the contrast ratio as (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. The result is compared against WCAG thresholds to determine pass/fail for AA and AAA levels.
Key Features
- Calculates WCAG 2.1 contrast ratio
- Tests AA and AAA compliance for normal and large text
- Visual preview of text on background
- Interactive color pickers for both colors
- Shows exact contrast ratio (e.g., 4.5:1)
- Copy result to clipboard
- Runs in the browser with no uploads
- Real-time calculation
Common Use Cases
Validating website text colors
Check that body text meets WCAG AA contrast requirements on a given background.
Designing accessible forms
Verify that form labels and input text have sufficient contrast against the form background.
Creating accessible buttons
Test button text contrast against the button background color.
Auditing an existing design
Check all color combinations in a design system for WCAG compliance.
How to Use This Tool
Pick foreground and background colors
Use color pickers or enter hex codes for both colors.
View the contrast ratio
The tool shows the exact ratio and whether it passes AA and AAA.
Preview the text
See a visual example of text rendered on the background.
Adjust and recheck
Modify the colors until the contrast meets your target level.
Pro Tips
- 1
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold).
- 2
WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
- 3
Dark text on a light background usually passes. Light text on a dark background can also pass if the contrast is high enough.
- 4
Use this tool early in the design process to avoid accessibility issues later.
Frequently Asked Questions
What is WCAG?
WCAG (Web Content Accessibility Guidelines) is an international standard for making web content accessible. Contrast ratio requirements ensure text is readable for people with low vision.
What contrast ratio do I need?
For WCAG AA: 4.5:1 for normal text, 3:1 for large text. For WCAG AAA: 7:1 for normal text, 4.5:1 for large text.
Is my data sent to a server?
No. All calculation happens in your browser. Nothing is transmitted.
What is considered large text?
Large text is 18pt (24px) or larger, or 14pt (18.67px) bold or larger. Large text has lower contrast requirements because it is easier to read.
Can I check more than two colors?
The tool checks one foreground-background pair at a time. Run it separately for each combination in your design.