Check WCAG 2.1 color contrast ratios for text accessibility. AA and AAA compliance testing.
Aa Large Text (18pt+)
The quick brown fox jumps over the lazy dog. Normal body text (14px).
UI Components and small text elements at 14px regular weight.
The Contrast Checker calculates the WCAG 2.1 relative luminance contrast ratio between any two colors and shows whether your text-and-background combination passes the AA and AAA accessibility standards. A live preview renders large text, normal body text, and small UI text in your chosen colors so you can judge readability before shipping. All calculation happens instantly in the browser.
The WCAG 2.1 contrast ratio is computed using relative luminance - a perceptually weighted measure of how bright a color appears to the human eye. Each color's RGB values are first linearized (gamma-expanded) and then combined using the formula L = 0.2126R + 0.7152G + 0.0722B to produce a luminance value between 0 (black) and 1 (white). The ratio is then (L_lighter + 0.05) / (L_darker + 0.05), producing a value from 1:1 (no contrast) to 21:1 (black on white). The 0.05 offset prevents division by zero and accounts for real-world ambient light.
WCAG AA (the legal minimum for most accessibility regulations) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). WCAG AAA is the enhanced standard requiring 7:1 for normal text and 4.5:1 for large text, and is typically only mandated for specific contexts like government services or medical applications. Most commercial websites target AA compliance, while AAA is treated as a best-practice goal for primary body content where maximum readability is critical.
Contrast ratio is just one of many accessibility considerations defined by WCAG 2.1. Passing contrast requirements does not automatically ensure accessibility - you also need sufficient font size, adequate line height, keyboard navigability, appropriate ARIA roles, focus indicators, and more. However, color contrast is one of the most impactful and commonly failed criteria, affecting users with low vision, color blindness, and those viewing screens in bright sunlight, making it a high-priority issue to address early in design.
WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold weight. This distinction exists because larger letterforms are more legible at lower contrast levels - the eye can more easily resolve the shape of a large character even when the color difference is smaller. In practice, heading text above 24px at normal weight benefits from the relaxed 3:1 threshold, while body text, labels, and UI chrome almost always fall under the stricter 4.5:1 requirement.
Lighthouse and axe DevTools audit the contrast of every text element in a rendered page and flag failures with element-level detail - essential for auditing existing code. This tool is designed for the design phase: you specify two colors directly and get instant feedback before any code is written, enabling you to validate a color choice in under a second. It is ideal for use alongside a style guide or design token file where you want to pre-screen every proposed text/background combination before it enters your codebase.