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.
The quick brown fox jumps over the lazy dog.
Normal body text at 16px for readability testing.
Small text at 14px - check if this is still readable.
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 Contrast?
WCAG 2.1 defines minimum contrast ratios between text and background to ensure readability. Ratios range from 1:1 (no contrast) to 21:1 (black on white). This tool tests against both AA and AAA standards instantly.
~1 in 12 men and 1 in 200 women have color vision deficiency. Laws like ADA, Section 508, and EN 301 549 reference WCAG, making contrast checking essential.
WCAG Levels
How Contrast Ratios Work
A contrast ratio measures the difference in relative luminance between a foreground color (text) and its background color. The ratio ranges from 1:1 (identical colors, zero contrast) to 21:1 (pure black on pure white, maximum contrast). This calculation follows the WCAG 2.1 algorithm defined in Success Criterion 1.4.3 (Contrast Minimum) and SC 1.4.6 (Contrast Enhanced).
The formula uses the relative luminance of each color — a weighted sum of linearized RGB values that accounts for how human eyes perceive brightness. This is why a green text on white background can pass contrast checks even when a red text of similar RGB intensity fails — our eyes are more sensitive to green light.
For designers working with brand colors, meeting contrast requirements often means adjusting shades and tints of your palette rather than changing the hue entirely. Use the suggestions feature above to find accessible alternatives that stay close to your original color scheme.
Color Accessibility & Inclusive Design
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency (commonly called color blindness). Combined with users who have low vision, situational impairments (bright sunlight, old screens), or aging eyes, poor contrast affects a significant portion of your audience.
Web accessibility laws worldwide — including the ADA (US), Section 508, EN 301 549 (EU), and the European Accessibility Act — reference WCAG guidelines. Meeting WCAG compliance isn't just good UX — it's increasingly a legal requirement. This free color accessibility tool helps you verify compliance before shipping.
Beyond contrast ratios, consider never relying on color alone to convey information. Use icons, patterns, or text labels alongside color to support users with color vision deficiency. Pair this contrast checker with MiroMiro's Chrome extension to audit color accessibility across entire pages.
FAQ
What contrast ratio do I need for WCAG AA?
Normal text (under 18pt) needs 4.5:1. Large text (18pt+ or 14pt+ bold) needs 3:1. Non-text elements like icons and form borders also need 3:1.
What is the difference between AA and AAA?
AA is the practical standard (4.5:1 normal, 3:1 large). AAA is enhanced (7:1 normal, 4.5:1 large) — better readability but harder to achieve with brand colors.
How do I check contrast on a live website?
Use the MiroMiro Chrome extension — it checks contrast ratios on hover, directly on any live page. No need to copy hex codes.
Does this support WCAG 2.2?
Yes. Text contrast requirements (SC 1.4.3 and 1.4.6) are identical in WCAG 2.1 and 2.2. The ratios 4.5:1, 3:1, and 7:1 apply to both.
How is this different from Stark or other contrast tools?
Stark is a Figma plugin that checks contrast within design files. This tool checks contrast online for any hex color pair. For live website testing, MiroMiro's Chrome extension checks contrast directly in the browser — no need to copy colors into a separate tool.
What about APCA — the new contrast algorithm?
APCA (Accessible Perceptual Contrast Algorithm) is being developed for WCAG 3.0 and improves on the current formula by better modeling how humans perceive contrast. However, WCAG 2.1 and 2.2 — the current legal standards — still use the relative luminance formula that this tool implements.
Does color blindness affect contrast ratio results?
The WCAG contrast ratio formula measures luminance difference, which is independent of color vision deficiency. A color pair that passes WCAG will be readable for most users regardless of color blindness type. However, for critical UI elements, avoid relying solely on color to convey meaning.
Related Tools
Color Info & Lookup
Contrast ratios, shades, tints, and format conversions for any color.
Color Converter
Convert between HEX, RGB, HSL, and OKLCH formats.
Contrast Checker Extension
Scan entire pages for accessibility issues in your browser.
WCAG Complete Guide
In-depth guide to implementing WCAG contrast requirements.