Free WCAG Contrast Checker
Test your text and background colors against WCAG 2.1 AA and AAA accessibility standards. Get instant contrast ratio results, pass/fail checks, and suggestions to fix accessibility issues.
Sample Text
The quick brown fox jumps over the lazy dog.
Small text preview for contrast checking.
Contrast Ratio
12.63:1
ExcellentAA Normal
Pass
≥ 4.5:1
AA Large
Pass
≥ 3:1
AAA Normal
Pass
≥ 7:1
AAA Large
Pass
≥ 4.5:1
Embed this tool on your website
Add a free contrast checker to your blog or documentation:
<iframe src="https://miromiro.app/embed/contrast-checker" width="100%" height="500" frameborder="0"></iframe> What is WCAG Color Contrast?
The Web Content Accessibility Guidelines (WCAG) 2.1 define minimum contrast ratios between text and its background to ensure readability for people with visual impairments. The contrast ratio ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white). This WCAG contrast checker tests your color combinations against both AA and AAA standards instantly.
WCAG 2.1 Compliance Levels Explained
- AA Normal Text (4.5:1) - The minimum WCAG 2.1 contrast ratio required for body text (under 18pt or 14pt bold). This is the standard most websites aim for.
- AA Large Text (3:1) - The minimum ratio for large text (18pt+ or 14pt+ bold). Large text is easier to read, so a lower ratio is acceptable.
- AAA Normal Text (7:1) - Enhanced accessibility level. Achieving AAA contrast ensures maximum readability for users with low vision.
- AAA Large Text (4.5:1) - Enhanced accessibility for large text. The gold standard for accessible design.
Why Color Contrast Matters for Accessibility
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Good contrast ensures your content is readable by the widest possible audience, including people with low vision, color blindness, or those viewing screens in bright sunlight. Many accessibility laws (ADA, Section 508, EN 301 549) reference WCAG standards, making a color contrast checker essential for compliance.
Frequently Asked Questions
What contrast ratio do I need for WCAG AA compliance?
For WCAG 2.1 AA compliance, normal text (under 18pt) needs a minimum contrast ratio of 4.5:1 against its background. Large text (18pt+ regular or 14pt+ bold) requires at least 3:1. Non-text elements like icons and form borders need 3:1.
What is the difference between WCAG AA and AAA?
AA is the standard compliance level most websites target. AAA is the enhanced level requiring 7:1 for normal text and 4.5:1 for large text. While AAA provides better readability, it can be difficult to achieve with brand colors, so AA is considered the practical minimum.
How do I check contrast on a live website?
You can use the MiroMiro Chrome extension to check contrast ratios directly on any live website. It includes a built-in contrast checker that works on hover - no need to copy hex codes manually. Alternatively, paste your colors into this tool above.
Does this tool support WCAG 2.2?
Yes. The contrast requirements in WCAG 2.2 for text (Success Criterion 1.4.3 and 1.4.6) are identical to WCAG 2.1. The ratios tested by this tool (4.5:1, 3:1, 7:1) apply to both versions.
Related Free Tools
- Color Info & Lookup - See contrast ratios on white and black for any color, plus shades, tints, and format conversions.
- Color Converter - Convert between HEX, RGB, HSL, and OKLCH to find accessible color alternatives.
- Contrast Checker Extension Feature - Scan entire pages for accessibility issues with the MiroMiro Chrome extension.
- WCAG Contrast Checker Complete Guide - In-depth guide to understanding and implementing WCAG contrast requirements.