WCAG Contrast Checker
Verify WCAG AA & AAA compliance, simulate color blindness, get instant fix suggestions, and analyze your entire design system palette — all in real time.
WCAG Compliance
Live Preview
#1A1A2E on #FFFFFFHeading Text
The quick brown fox jumps over the lazy dog. Body text at 16px shows how readable your combination is at normal size.
This is a hyperlinkSmall text 12px — additional details
Color Details
What Is WCAG Contrast and Why Does It Matter?
The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure that text and UI elements are readable by users with visual impairments, including the approximately 2.2 billion people worldwide with some form of vision impairment.
Contrast ratio is a mathematical relationship between the relative luminance of two colors, ranging from 1:1 (identical colors, impossible to distinguish) to 21:1 (pure black on pure white). The human eye can comfortably read text at 4.5:1 and above.
WCAG AA vs AAA — Which Do You Need?
WCAG 2.1 Level AA is the standard required by most accessibility laws including ADA (USA), EN 301 549 (EU), and AODA (Canada). It requires:
4.5:1 for normal text (under 18px regular weight or 14px bold) · 3:1 for large text (18px+ or 14px+ bold) · 3:1 for UI components and graphics
WCAG 2.1 Level AAA is the enhanced standard, recommended for body copy and critical interfaces. It requires 7:1 for normal text and 4.5:1 for large text. Not legally mandated for most products, but recommended for maximum accessibility.
Frequently Asked Questions
What contrast ratio is required for WCAG AA?
4.5:1 for normal text and 3:1 for large text (18px+ regular or 14px+ bold). UI components also need 3:1 against their background.
What is large text in WCAG?
Text that is at least 18pt (24px) at normal weight, or at least 14pt (~18.67px) at bold weight (700+). Large text requires lower contrast — 3:1 for AA and 4.5:1 for AAA.
Is #767676 accessible on white?
#767676 on white gives exactly 4.54:1 — barely AA for normal text. Anything lighter fails. For safer margins, use #595959 (7:1) or darker gray.
How does color blindness affect accessibility?
~8% of males have color vision deficiency (CVD). The most common types are Deuteranopia and Protanopia. Use the Color Blindness tab to see how your palette appears to affected users. Never rely on color alone to convey information.
Is this checker free?
Yes, 100% free. No account, no limits. Color blindness simulation, fix suggestions, palette matrix, bulk analysis — all free. Everything runs in your browser.