Check WCAG AA & AAA contrast in seconds — with live preview
Quick presets
Large text (24px bold)
Normal body text (16px) — Accessibility ensures that web content is readable and usable for all users, including those with visual impairments or colour-vision deficiencies.
Small text (12px) — The harder scenario. WCAG requires 4.5:1 here at AA and 7:1 at AAA.
WCAG 2.2 Contrast Ratio
AAA — Enhanced
Meets the highest WCAG accessibility standard for all text sizes.
Foreground luminance
0.0218
Background luminance
0.9536
Compliance by context
Large text = 18pt (24px) normal weight or 14pt (18.67px) bold weight.
AA is the minimum legal standard in many jurisdictions (EN 301 549, ADA, AODA). AAA is the enhanced (recommended) standard.
UI components covers input borders, focus indicators, icons, and other non-text visual elements (min 3:1 under WCAG 1.4.11).
The Contrast Ratio Checker instantly calculates the WCAG 2.2 contrast ratio between any two colors, showing whether your combination passes AA (4.5:1 for normal text) and AAA (7:1) accessibility standards. Enter hex or RGB values, use the color pickers, and get a live text preview alongside Pass/Fail results for normal text, large text, and UI components — all without leaving your browser.
For normal-sized text (below 18pt or 14pt bold), you need a minimum contrast ratio of 4.5:1 for WCAG AA compliance. For large text (18pt+ or 14pt+ bold) and UI components like input borders and icons, the threshold is lower at 3:1.
AA is the widely adopted legal minimum — required by standards like EN 301 549, ADA, and AODA. AAA is the enhanced accessibility target: 7:1 for normal text and 4.5:1 for large text. AAA is recommended for text-heavy interfaces or products serving users with low vision.
The WCAG contrast ratio formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 of the darker. Relative luminance converts each sRGB channel to a linearised value using a gamma correction curve before weighting red, green, and blue channels at 21.26%, 71.52%, and 7.22% respectively.
Yes. WCAG success criterion 1.4.11 (Non-Text Contrast) requires a minimum 3:1 ratio for UI components such as button borders, input outlines, focus rings, and meaningful icons. The checker includes a dedicated UI / Graphics badge so you can verify these elements alongside your text colors.