Free WCAG Contrast Checker — AA & AAA, 4.5:1 & 3:1
Test any text and background color pair against WCAG 2.1 & 2.2 contrast ratios. Get instant AA/AAA pass-fail badges, one-click fix suggestions, and a shareable URL. Free, runs in your browser.
The quick brown fox jumps over the lazy dog.
Normal body text at 14–15px, used for paragraphs and descriptions.
Small text at 12px — verify this is still readable.
Enhanced — passes AAA normal
WCAG 2.1 & 2.2 contrast requirements
| Level | Normal text | Large text | Non-text UI |
|---|---|---|---|
| AA SC 1.4.3 | 4.5 : 1 | 3 : 1 | 3 : 1 SC 1.4.11 |
| AAA SC 1.4.6 | 7 : 1 | 4.5 : 1 | — |
Large text is defined as at least 18pt regular weight (~24px) or at least 14pt bold (~18.66px). Everything smaller is normal text and must meet the higher 4.5:1 ratio (AA) or 7:1 (AAA). These requirements are identical in WCAG 2.1 and WCAG 2.2.
How the contrast ratio is calculated
The WCAG contrast ratio formula comes from Success Criterion 1.4.3. First compute the relative luminance of each color — a weighted, linearized sum of its sRGB channels — then take the ratio of lighter-over-darker, padded by 0.05 to avoid division by zero.
// 1. Normalize sRGB channel (0–1) then linearize
function lin(c) {
c = c / 255
return c <= 0.03928
? c / 12.92
: Math.pow((c + 0.055) / 1.055, 2.4)
}
// 2. Relative luminance (0 = black, 1 = white)
function luminance(r, g, b) {
return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)
}
// 3. Contrast ratio
function ratio(fg, bg) {
const L1 = Math.max(luminance(...fg), luminance(...bg))
const L2 = Math.min(luminance(...fg), luminance(...bg))
return (L1 + 0.05) / (L2 + 0.05)
} The weights 0.2126 / 0.7152 / 0.0722 reflect how the human eye perceives brightness — green contributes most, blue least. That's why green text on white can pass while red text of similar RGB intensity fails: our eyes see green as brighter.
WCAG 2.1, 2.2 and APCA — what's the difference?
WCAG 2.1 (2018)
The current baseline for most accessibility laws. Text contrast requirements are defined in SC 1.4.3 (AA, 4.5:1 / 3:1) and SC 1.4.6 (AAA, 7:1 / 4.5:1). Referenced by ADA, Section 508, EN 301 549.
WCAG 2.2 (2023)
Adds 9 new success criteria on top of 2.1 (focus appearance, target size, redundant entry, etc.). Text contrast rules are identical — same 4.5:1, 3:1, 7:1 ratios. This tool's results apply to both 2.1 and 2.2.
APCA (WCAG 3.0 draft)
A newer algorithm that models perceived contrast more accurately across text sizes and weights. Being prototyped for WCAG 3.0 but not yet a ratified standard. For legal compliance in 2025, stick with the 2.1/2.2 formula.
Common contrast pairs
Color accessibility & inclusive design
Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Add in low vision, situational impairments (bright sunlight, old screens), and aging eyes, and poor contrast affects a significant portion of your audience.
Web accessibility laws worldwide — ADA (US), Section 508, EN 301 549 (EU), and the European Accessibility Act — all reference WCAG. Meeting WCAG AA isn't just good UX — it's increasingly a legal requirement for government, finance, e-commerce, and SaaS products.
Beyond contrast ratios, never rely on color alone to convey information. Pair color with icons, labels, or patterns so users with color vision deficiency can still parse every state. Use this checker alongside the MiroMiro Chrome extension to audit color accessibility across entire live pages.
Keyboard shortcuts
Swap text and background
Randomize to a passing pair
Copy share URL
Check contrast on live websites
MiroMiro's Chrome extension includes a built-in contrast checker — hover over any element on any page to see its ratio and WCAG badges instantly.
Add to ChromeFrequently asked questions
What contrast ratio do I need for WCAG AA compliance?
WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal body text (under 18pt, or under 14pt bold) and 3:1 for large text (18pt+ regular, or 14pt+ bold). Non-text UI elements like icons, form borders, and focus indicators also need 3:1. These requirements are defined in Success Criterion 1.4.3 (Contrast Minimum) and are carried forward unchanged in WCAG 2.2.
What is the difference between WCAG AA and AAA?
AA is the practical standard most websites target: 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced level requiring 7:1 for normal text and 4.5:1 for large text (Success Criterion 1.4.6 Contrast Enhanced). AAA provides better readability for users with low vision but can be difficult to achieve with brand colors, so AA is the legal minimum required by most accessibility laws.
What is WCAG 1.4.3?
WCAG 2.1 Success Criterion 1.4.3 "Contrast (Minimum)" is the AA-level requirement that the visual presentation of text and images of text has a contrast ratio of at least 4.5:1 — or 3:1 for large text, incidental text, or logotypes. This is the single most-cited criterion in web accessibility audits. WCAG 2.2 keeps the same definition.
What is the difference between WCAG 2.1 and WCAG 2.2?
WCAG 2.2 (published October 2023) adds 9 new success criteria on top of WCAG 2.1, but the color contrast requirements (SC 1.4.3 and SC 1.4.6) are identical — 4.5:1 normal text, 3:1 large text for AA, and 7:1 / 4.5:1 for AAA. This tool's pass/fail results apply to both 2.1 and 2.2.
How is the contrast ratio calculated?
The WCAG contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is a weighted sum of linearized sRGB channels: 0.2126·R + 0.7152·G + 0.0722·B. The formula accounts for how the human eye perceives brightness — green contributes far more than red or blue. Ratios range from 1:1 (identical) to 21:1 (pure black on pure white).
What counts as "large text" in WCAG?
WCAG defines large text as at least 18 point (typically ~24px) regular weight, or at least 14 point (~18.66px) bold. Anything smaller is "normal text" and needs the higher 4.5:1 ratio (AA) or 7:1 (AAA). Point sizes assume 96 DPI — always verify with the user's actual rendered font size.
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 versions. If your compliance target is EN 301 549, ADA, Section 508, or the European Accessibility Act, the results from this checker apply directly.
What is APCA and does it replace WCAG contrast ratio?
APCA (Accessible Perceptual Contrast Algorithm) is a newer contrast model being developed for WCAG 3.0. It improves on the current formula by better modeling how humans perceive contrast across different text sizes and weights. However, WCAG 3.0 is not yet a ratified standard — 2.1 and 2.2 are the current legally-binding versions, and this tool implements their relative luminance formula.
Do color blindness and low vision affect the ratio?
The WCAG ratio measures luminance difference, which is largely independent of color vision deficiency. A color pair that passes WCAG is readable for most users with color blindness. However, never rely on color alone to convey meaning — always pair color with text, icons, or patterns to support all users.
How do I check contrast on a live website?
The MiroMiro Chrome extension includes a built-in contrast checker that works directly on any live page — hover over any element to see its contrast ratio and WCAG compliance badges instantly, no need to copy hex codes manually into a separate tool.
Can I share a specific contrast result via URL?
Yes. The URL updates live as you edit (e.g. /tools/contrast-checker?fg=6B21A8&bg=FFFFFF). Click Share to copy the current combo. Perfect for design handoff, bug reports, or referencing a failing combination in a pull request.
Is this contrast checker free?
Yes — fully free with no signup, no watermark, and no limits. All calculation happens in your browser; your inputs never leave your device.
Embed this contrast checker
Add a free WCAG contrast checker to your blog, documentation, or design system:
<iframe src="https://miromiro.app/embed/contrast-checker" width="100%" height="500" frameborder="0"></iframe>