WCAG Contrast Checker
Verify color contrast against the WCAG 2.1 guidelines. Live preview, AA + AAA scoring and copyable ratio.
Small text — 14px regular
Body copy — 16px regular for paragraphs.
Large heading — 24px bold
AA normal requires 4.5:1, AAA normal requires 7:1. Large text starts at 18pt regular or 14pt bold.
WCAG (Web Content Accessibility Guidelines) is the international standard for accessible web content, maintained by the W3C. It defines two practical compliance levels for text contrast: AA, the standard most sites aim for, and AAA, a stricter target often required by public-sector, healthcare and education projects. Most legal frameworks reference AA — including the EU Web Accessibility Directive, EN 301 549, the Americans with Disabilities Act (in court interpretations) and Section 508 in the US.
- AA — 4.5:1 for body text, 3:1 for large text
- AAA — 7:1 for body text, 4.5:1 for large text
- UI components and graphical objects — at least 3:1 against adjacent colors (SC 1.4.11)
The contrast ratio is calculated using relative luminance — a perceptual measurement that approximates how bright a color appears to the human eye. A pair of colors with the same hue but different lightness can land anywhere between 1:1 (identical) and 21:1 (pure black on pure white). The formula weights green more heavily than red and red more heavily than blue, reflecting how human vision perceives the three channels.
WCAG 2.2 (released 2023) added a few new criteria around focus indicators and target size, but the contrast ratios for text and UI components remained the same as 2.1. A newer experimental algorithm called APCA (Advanced Perceptual Contrast Algorithm) is being explored for WCAG 3.0 — it accounts for font weight and size differently and tends to be stricter on light-text-on-dark-background combinations than WCAG 2.x. For now, ship to WCAG 2.1 AA at minimum and let APCA mature before relying on it.
Frequently asked questions
What is WCAG?+
WCAG stands for Web Content Accessibility Guidelines, the international standard for accessible web content, maintained by the W3C. The current stable version is 2.1; WCAG 2.2 was released in 2023 with additions around focus indicators and target sizes. WCAG 3.0 is in early draft and not yet recommended for production use.
Is AA enough?+
AA is the typical legal and product baseline — most accessibility laws (EU, US, Canada, Australia) reference AA explicitly or through standards that incorporate it. AAA is recommended for content where readability is mission-critical: healthcare interfaces, government services, education, public-safety information, and any product with a large older or low-vision audience.
What counts as large text?+
WCAG defines large text as 18pt regular or 14pt bold and above — roughly 24px regular or 19px bold in CSS. Bold weight effectively promotes a smaller size into the large-text category. The reasoning is that thicker strokes remain legible at lower contrast, so the WCAG ratio relaxes from 4.5:1 to 3:1 once text is large or bold enough.
Are there legal consequences for failing WCAG?+
Yes, increasingly. The EU Web Accessibility Directive requires public-sector sites to meet WCAG 2.1 AA. The European Accessibility Act (EAA) extends this to many private-sector products by 2025. In the US, ADA lawsuits citing inaccessible websites have grown rapidly; courts have repeatedly held WCAG AA as a reasonable benchmark. Non-compliance is a real legal and reputational risk.
What is APCA and should I use it?+
APCA (Advanced Perceptual Contrast Algorithm) is an experimental contrast model proposed for WCAG 3.0. It accounts for font weight, font size and polarity (light-on-dark vs dark-on-light) more accurately than WCAG 2.x. It is interesting and worth watching but not yet a recognized compliance standard. Stick to WCAG 2.1 AA for shipping and use APCA as a sanity check, not as your primary metric.