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.
🌈 Browse More Tools
Complete Guide: Color Contrast Checker
Everything you need to know about using this tool effectively
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.
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.
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.
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.
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold).
WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
Dark text on a light background usually passes. Light text on a dark background can also pass if the contrast is high enough.
Use this tool early in the design process to avoid accessibility issues later.
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.