This WCAG contrast checker measures the ratio between any two colors and tells you, in real time, whether your text meets WCAG 2.1 Level AA or AAA for both normal and large text. Enter hex codes directly, drag the color picker, or click Swap to flip foreground and background. A live preview panel shows exactly how the combination reads at regular and 18pt+ sizes. If a pair fails, Auto-suggest walks the nearest HSL lightness until it passes AA. Free, no sign-up, works offline after first load.
Last updated: March 2026
21.00:1
Contrast Ratio
The quick brown fox jumps over the lazy dog — sample text at 14px regular.
Large heading sample
Copied!
Frequently Asked Questions
What is a WCAG contrast ratio?
A WCAG contrast ratio is a number between 1:1 (no contrast) and 21:1 (pure black on pure white) that measures how distinguishable two colors are. It is calculated from the relative luminance of each color using the formula (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. The higher the ratio, the more readable text becomes for users with low vision, color-blindness, aging eyes, or difficult viewing conditions like direct sunlight on a phone screen.
What are the WCAG AA and AAA thresholds?
WCAG 2.1 defines four main text thresholds: AA Normal requires at least 4.5:1; AA Large (18pt / 24px or 14pt / 19px bold and larger) requires 3:1; AAA Normal requires 7:1; and AAA Large requires 4.5:1. Non-text UI components (form borders, focus rings, icons) and graphical elements need at least 3:1 against adjacent colors under WCAG 1.4.11. Most accessibility laws — including the ADA, Section 508, and the EU EN 301 549 — reference the AA level as the minimum.
What counts as large text under WCAG?
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (19px) or larger when bold. The rationale is that thicker strokes and taller letterforms remain legible at lower contrast, so the threshold drops from 4.5:1 to 3:1. Note that pt and px conversions assume the default 96 DPI browser baseline — always confirm the rendered size on real devices, because CSS transforms, zoom, or user-agent stylesheets can change the perceived size.
Why does the auto-suggest change lightness, not hue?
Contrast depends on relative luminance, which is driven primarily by the lightness channel. Adjusting lightness preserves your brand hue while nudging the luminance just enough to pass AA. Shifting hue or saturation instead often produces surprising perceived color changes without reliably fixing the ratio — a slightly darker blue reads as the same blue, but a slightly more saturated blue can feel like a completely different brand color. The suggester walks the HSL lightness in small steps until the combination crosses the 4.5:1 AA Normal threshold.
Are contrast ratios the only accessibility check I need?
No — contrast is one of many WCAG success criteria. You also need visible focus indicators (WCAG 2.4.7 and 1.4.11), text resizable up to 200% without loss of content (1.4.4), no reliance on color alone to convey meaning (1.4.1), motion-reduction preferences respected (2.3.3), and proper semantic HTML with ARIA where native elements are insufficient. Use this tool as the first pass, then run a full audit with Axe DevTools, Lighthouse, or the W3C validator before shipping.
Does opacity affect contrast calculations?
Yes — when you use rgba() or opacity, the actual rendered color is the result of compositing the foreground over whatever is behind it. WCAG expects you to test the final rendered color pair. If you are evaluating a semi-transparent text color, first calculate the composited sRGB value against its true background, then feed that composited color into the checker. This tool assumes opaque input for simplicity; use the computed RGB from browser DevTools for translucent UI.
Will the upcoming WCAG 3 / APCA change these rules?
WCAG 3 introduces a new contrast model called APCA (Accessible Perceptual Contrast Algorithm) that reports a signed lightness-contrast value rather than a ratio. APCA accounts for font weight, size, and polarity (light-on-dark vs dark-on-light) more accurately than the luminance-ratio method. As of 2026, WCAG 2.1 / 2.2 ratio rules remain the legal standard in most jurisdictions. This tool implements the WCAG 2.x formula; expect a dedicated APCA checker once WCAG 3 is ratified.