WCAG Contrast Explained: AA, AAA, and Readable Color

Overview

Contrast is what makes text legible. If letters are too close in brightness to the surface behind them, readers with low vision, aging eyes, or a sunlit phone cannot make them out. The Web Content Accessibility Guidelines turn that into a measurable number, the contrast ratio between a text color and its background. This WCAG color contrast checker computes that ratio and tells you which accessibility levels the pair passes.

Why it matters

Readable color is a legal and ethical baseline, not a nicety. Most accessibility laws reference WCAG AA, so failing contrast can put a product out of compliance and, more importantly, shut real users out. Good contrast also helps everyone: it keeps interfaces usable in bright sun, on cheap screens, and for tired eyes. Checking early saves an expensive redesign when an audit flags the problem later.

How it works

Every color has a relative luminance from 0 (black) to 1 (white) that models how bright it looks, weighting green most and blue least. The contrast ratio takes the lighter luminance plus 0.05, divided by the darker luminance plus 0.05, giving a value from 1 to 1 up to 21 to 1. The thresholds are 4.5 to 1 for AA normal text, 3 to 1 for AA large text, 7 to 1 for AAA normal, and 4.5 to 1 for AAA large. That is the AA vs AAA contrast requirements in one place, and this wcag contrast checker shows all four verdicts at once. Note that contrast is symmetric, so text and background order does not change the ratio: swapping them gives the same number.

Examples

For example, enter a text color of #767676 on a white background and the WCAG color contrast checker reports 4.54 to 1, which just passes AA for normal text but fails AAA. As another example, #999999 on white gives 2.85 to 1 and fails AA outright; press Suggest an accessible text color and it darkens to about #767676 to reach the 4.5 to 1 bar while keeping the same neutral hue. Pure black on white is the maximum, 21 to 1.

Common mistakes

• Using the wrong text-size threshold. Large text (about 24px, or 18.66px bold) may use 3 to 1; do not apply that to small body text.
• Treating a pass as full accessibility. Passing contrast does not make a page fully accessible. This a11y contrast check is necessary but not sufficient, so also test focus states, labels, and screen readers.
• Relying on color alone. Never signal meaning with color by itself, since a passing ratio does not help colorblind users distinguish states.

Comparisons and alternatives

Comparing this WCAG color contrast checker vs alternatives, many popular checkers stop at the ratio; this one also suggests the nearest passing color so you can fix a failure in one tap. Pair it with the Color Format Converter to turn an accessible color into the rgb() or oklch() value your CSS needs. If you are aiming for the enhanced wcag aaa level, use the 7 to 1 result rather than the 4.5 to 1 AA bar. For a full picture, treat contrast as one required check alongside keyboard and screen reader testing rather than the whole of accessibility.

Runs entirely in your browser

No color you enter leaves your device. The math runs locally, nothing is uploaded, and the tool works offline once loaded, so you can check contrast even inside an internal tool with no internet access.