WCAG Contrast Checker
Check foreground/background color contrast ratios against WCAG 2.1 AA and AAA accessibility standards.
Large Text (24px bold)
Normal body text at 16px. This is how your text will appear on this background color.
Smaller text at 14px — often used for captions and UI labels.
Contrast ratio
17.40:1
AA Normal
Pass
requires 4.5:1
AA Large
Pass
requires 3:1
AAA Normal
Pass
requires 7:1
AAA Large
Pass
requires 4.5:1
AA UI
Pass
requires 3:1
About WCAG Contrast Requirements
WCAG (Web Content Accessibility Guidelines) 2.1 defines minimum contrast ratios to ensure text is readable for people with low vision or color blindness. The contrast ratio is calculated from the relative luminance of the two colors using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. A ratio of 1:1 is no contrast (identical colors); 21:1 is maximum contrast (black on white).
There are two conformance levels: AA (the legal minimum in most jurisdictions) requires 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold), and 3:1 for UI components and graphical elements. AAA (enhanced) requires 7:1 for normal text and 4.5:1 for large text — recommended for critical content. Many jurisdictions including the EU, UK, and US federal government legally require at least WCAG AA compliance.
Relative luminance accounts for gamma correction and the non-linear sensitivity of human vision. Pure chromatic colors like red (#ff0000 on white = 4.0:1) often fail AA — always verify with this tool before finalizing color choices.
Frequently Asked Questions
What counts as "large text" in WCAG?
WCAG defines large text as 18 point (24px) or larger for normal weight, or 14 point (approximately 18.67px) or larger for bold text. Large text only needs a 3:1 contrast ratio for AA compliance, compared to 4.5:1 for smaller text.
Do placeholder text and disabled elements need to meet contrast requirements?
No. WCAG explicitly exempts text or images of text that are part of an inactive UI component (disabled), decorative, or not visible to anyone. Placeholder text in form fields is technically also exempt, though many accessibility practitioners recommend meeting at least 3:1 for placeholder text as good practice.
What is the difference between AA and AAA?
AA is the minimum acceptable standard (4.5:1 for normal text). AAA (7:1) is the enhanced standard, recommended for text-heavy content and critical interfaces. AAA is not required for full WCAG 2.1 conformance — it is an optional enhancement. Many government and healthcare sites target AAA for maximum accessibility.
Does contrast ratio apply to icons and images?
Yes — WCAG 1.4.11 (Non-text Contrast, AA) requires that UI components and graphical elements meaningful for understanding content meet a 3:1 contrast ratio against adjacent colors. This includes icons, form borders, focus indicators, and chart lines.