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 is WCAG contrast ratio?
WCAG (Web Content Accessibility Guidelines) defines contrast ratio as the luminance difference between two colors, expressed as a ratio. It ranges from 1:1 (identical colors) to 21:1 (black on white). The higher the ratio, the more readable text is for users with visual impairments.
What contrast ratio is required for WCAG AA?
WCAG AA requires a contrast ratio of at least 4.5:1 for normal text (under 18px regular or 14px bold) and 3:1 for large text (18px+ regular or 14px+ bold). UI components like buttons and icons also require 3:1 against their background.
What is WCAG AAA?
WCAG AAA is the enhanced accessibility standard requiring 7:1 contrast for normal text and 4.5:1 for large text. It is recommended for body text and critical UI elements, but not always required by law. AAA compliance makes content accessible to the widest possible audience.
What is large text in WCAG?
WCAG defines large text as text that is at least 18 points (24px) at normal weight, or at least 14 points (approximately 18.67px) at bold weight (700 or higher). Large text has lower contrast requirements — 3:1 for AA and 4.5:1 for AAA — because it is easier to read than smaller text.
How does color blindness affect web accessibility?
Approximately 8% of males and 0.5% of females have some form of color vision deficiency. The most common types are Deuteranopia (no green cones) and Protanopia (no red cones). Using only color to convey information — like red for errors — excludes these users. Use the Color Blindness tab to preview your palette, and pair good contrast with non-color cues (icons, patterns, text labels).
Is #767676 accessible on white?
#767676 on white (#FFFFFF) has a contrast ratio of exactly 4.54:1, which barely passes WCAG AA for normal text. Any gray lighter than #767676 will fail AA on white backgrounds. For safer accessibility, use #595959 (7:1) or darker.
Is this contrast checker free?
Yes, completely free. No signup, no account, no limits. Color blindness simulation, fix suggestions, palette matrix, and bulk analysis are all available to everyone, and every calculation happens in your browser — nothing is sent to any server.