WCAG 2.1 Compliance
Check against official Web Content Accessibility Guidelines with clear pass/fail results for each criterion.
Free Online Tool
Color Contrast Checker - WCAG Accessibility Tool
Check color contrast ratios for WCAG 2.1 accessibility compliance. Test AA and AAA standards for text, large text, and UI components. Real-time preview with pass/fail indicators.
Text
#FFFFFF
Background
#1A1A25
Typography Scale Preview
Display48px / Bold
3:1
Heading 230px / Semibold
3:1
Heading 3 / Large18px+ or 14px Bold
3:1
Body text - Normal paragraph content16px / Regular
4.5:1
Small text - Captions, labels, helper text14px / Regular
4.5:1
Tiny text - Legal, footnotes (enhanced)12px / Regular
7:1
UI Components
BadgeTagLink text
AA Large
≥ 3:1
18px+ text
AA Normal
≥ 4.5:1
All text sizes
AAA Enhanced
≥ 7:1
Best practice
Contrast Checker
Check and optimize color contrast
WCAG 2.1 Compliance
Normal Text(4.5:1)
Pass
Large Text(3:1)
Pass
Enhanced (AAA)(7:1)
Pass
Perfect Contrast!
@pixeliro
Key Features
Powerful features designed for designers and developers
AA & AAA Testing
Test both AA (minimum) and AAA (enhanced) contrast requirements. See exactly where your colors stand.
Real-time Preview
See your color combinations applied to actual text as you adjust. Instant visual feedback on readability.
Smart Suggestions
Get AI-powered color suggestions that maintain your design intent while meeting accessibility standards.
Multiple Color Formats
Input colors in HEX, RGB, HSL, or by name. Copy results in any format for your workflow.
Component Preview
Preview your colors in realistic UI components like buttons, cards, and forms. Not just text samples.
How It Works
Get started in just a few simple steps
- 1
Enter Foreground Color
Type or paste your text/foreground color in HEX, RGB, or HSL format. You can also use the color picker.
- 2
Enter Background Color
Add your background color the same way. The contrast ratio calculates automatically.
- 3
Review WCAG Results
See instant pass/fail results for Normal Text AA, Normal Text AAA, Large Text AA, and Large Text AAA.
- 4
Get Suggestions (if needed)
If your colors fail, click "Suggest" to get accessible alternatives that preserve your design intent.
Export & Share
Copy the color values, share a link to your results, or export as a design token.
Frequently Asked Questions
Everything you need to know
What is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colors to ensure readability for people with visual impairments. AA requires 4.5:1 for normal text, AAA requires 7:1.
What's the difference between AA and AAA?
AA is the minimum accessibility standard (4.5:1 for normal text, 3:1 for large text). AAA is enhanced accessibility (7:1 for normal text, 4.5:1 for large text). Most guidelines require AA compliance.
What counts as "large text"?
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (18.66px) or larger for bold weight. Large text has lower contrast requirements.
Does this tool check contrast for colorblind users?
This tool checks one text/background pair. To see how a whole palette looks with protanopia, deuteranopia or tritanopia, use the Color Accessibility Check, which includes colorblind simulation.
Can I test multiple color combinations at once?
This page checks one pair at a time. To test every color in a palette against each other at once, use the Contrast Matrix in the Color Accessibility Check.
Is WCAG 2.1 the latest standard?
WCAG 2.1 is the current widely-adopted standard. WCAG 2.2 was released in 2023 and our tool is being updated to include its new criteria for focus appearance.
Related Tools
Explore more color tools
Ready to Get Started?
Color Contrast Checker - WCAG Accessibility Tool - Free, no signup required
Check Contrast Now