A WCAG contrast checker measures the luminance ratio between two colors and reports pass or fail for AA and AAA accessibility levels in real time. The formula divides the lighter color's relative luminance by the darker color's relative luminance after adding a 0.05 offset to each, giving a result between 1:1 for identical colors and 21:1 for pure black on pure white. That single number is what every accessibility standard turns into a pass or fail threshold, so the same ratio can be judged differently depending on the size and weight of the text it sits behind. Designers, developers, and content authors reach for a contrast checker because legal frameworks in the United States, Europe, and elsewhere treat those thresholds as binding requirements, not best-effort guidelines. The Americans with Disabilities Act, Section 508, and the European EN 301 549 standard all reference WCAG, which means a brand palette that fails the checker can fail an audit just as easily as a missing alt tag.
What the Contrast Ratio Actually Measures
The ratio is not a measure of how "different" two colors look. It is a precise calculation of how much light the foreground reflects compared with the background, weighted by how the human eye perceives brightness across the visible spectrum. Each color channel is converted from sRGB to linear light, then combined into a single relative luminance value using the weights 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker one. Those proportions are exactly what the W3C defines in the WCAG 2.x specification, and they are the reason a contrast checker's results are accepted as authoritative for compliance audits.
Because luminance is weighted heavily toward green, two colors with similar green channels but very different red and blue channels can still produce a low contrast ratio. A worked example illustrates the point. Take pure red (#FF0000) against pure green (#00FF00):
- Relative luminance of #FF0000: 0.2126 × 1 + 0.7152 × 0 + 0.0722 × 0 = 0.2126
- Relative luminance of #00FF00: 0.2126 × 0 + 0.7152 × 1 + 0.0722 × 0 = 0.7152
- Contrast ratio: (0.7152 + 0.05) / (0.2126 + 0.05) = 0.7652 / 0.2626 ≈ 2.91:1
That falls well below the 4.5:1 required for AA normal text, which is exactly why a contrast checker is essential: the eye sees two vivid, distinct hues, but the math says they read like a low-contrast gray-on-gray pair.
The WCAG Thresholds You Need to Hit
WCAG splits contrast requirements into three categories, each with its own minimum ratio. The categories exist because larger text is easier to read at lower contrast, and because interface elements like icons and form borders do not need the same legibility threshold as body copy.
| Standard | Normal text | Large text | UI components & graphics |
|---|---|---|---|
| WCAG AA | ≥ 4.5:1 | ≥ 3:1 | ≥ 3:1 |
| WCAG AAA | ≥ 7:1 | ≥ 4.5:1 | ≥ 3:1 (same rule) |
WCAG defines large text as at least 18 point (about 24 pixels) for regular weight, or at least 14 point (about 18.66 pixels) when bold. Larger, thicker letters need less contrast to remain readable, which is why the bar drops from 4.5:1 to 3:1 between normal and large text at the AA level. Level AAA raises the bar for both text sizes but does not add a stricter rule for UI components, since the same 3:1 non-text contrast rule already covers them.
Use a tool such as the Color Contrast Checker to compare any color pair against all four thresholds at once and see exactly which badges your combination clears.
How to Check a Color Pair in Three Steps
- Set the foreground (text) color using the color picker or by typing a hex value like #111111.
- Set the background color the same way, for example #ffffff.
- Read the contrast ratio and the AA/AAA pass or fail badges, and adjust either color until it meets the level you need.
That is the entire workflow. The checker does the math instantly, so iteration is cheap: nudge the foreground darker, watch the ratio rise, and stop when the AA normal text badge flips from fail to pass. If you are working from a design token or CSS variable, paste the hex directly into the input rather than estimating from a swatch, because designers regularly misjudge luminance by a full step or two, which is exactly the gap between passing 4.49:1 and failing the audit.
A practical workflow: start with your brand color as the text on white, see whether it clears AA at 4.5:1, and if it does not, decide whether to darken the brand color for text uses only (keeping the bright version for backgrounds and accents) or to swap the background to a softer off-white that preserves your palette. The point is to make the trade-off visible before the design ships.
Reading the Pass and Fail Badges
A contrast checker should report each threshold separately. A combination that passes AA large text at 3:1 may still fail AA normal text at 4.5:1, and a combination that passes AA at 4.5:1 may still fail AAA at 7:1. Reading the badges together, rather than treating the tool as a single yes/no, prevents the most common mistake: assuming a passing AA ratio means the design is fully accessible.
Pay particular attention to two thresholds. First, UI components and graphics: form field borders, focus rings, button outlines, and icon strokes need at least 3:1 against any adjacent surface. A button with a 1px border in the same hue as the background can easily fail here even when the text inside the button is fine. Second, large text: if your heading is 16px regular weight, it counts as normal text and needs 4.5:1, not 3:1. Mark something as "large" only when it actually meets the 18pt or 14pt-bold definition; visual prominence is not the same thing.
The badges also reveal direction. A pair that passes large text but not normal text usually means the text is too small, the contrast is too low, or both, and the fix is rarely to bump the font size alone, because most body copy has to stay readable at its current size.
Why Some Color Pairs Surprise You
The ratio is symmetric. Swap the foreground and background colors and the number does not change, because the formula always divides the lighter luminance by the darker one. That property is useful for sanity checks: if a tool reports a different ratio when you flip the colors, the math is broken. It also means contrast is a property of the pair, not of the design hierarchy.
The ratio does not measure hue. Two colors with very different hues can still fail if their luminance values are close, and two colors with similar hues can pass if one is dramatically darker. This is why a checker is essential: relying on the eye alone systematically misses low-contrast pairs in the middle of the spectrum, particularly mid-tone grays, dusty purples, and warm earth tones. Designers who trust visual judgment over a checker tend to ship palettes that pass on a calibrated monitor but fail on cheap laptop screens, in bright sun, or for readers with cataracts and low vision.
The ratio does not cover color vision deficiency. About one in twelve men and one in two hundred women have some form of color vision deficiency, and a passing luminance ratio does not guarantee that, say, a red error message stands out from a green success message. Pair color with text labels, icons, or underlines so the meaning survives for viewers who cannot separate the hues.
Practical Tips for Getting It Right
Test at the extremes, not just the average. Gradients, semi-transparent overlays, and text placed on images all have a background that varies across the element. A gradient that averages to a passing gray can still drop below 4.5:1 at its lightest point where a thin letter stroke crosses it. Run the lightest and darkest colors that a letter can actually sit on through the Color Contrast Checker and make sure both pass.
Mind the failure hot spots. Placeholder text, disabled-state form fields, thin decorative fonts, and small captions are where contrast quietly fails. Default placeholder text is usually lighter than the input value, and disabled buttons often drop below 3:1 against their own background. Audit each of these explicitly; they rarely fail because a designer chose a bad color but because the design system shipped with one color for "muted" text without checking it against every surface it appears on. For a deeper checklist, see these contrast checker tips and common mistakes to avoid.
Keep the audit local. A browser-based checker runs entirely on your machine, so you can experiment with brand palettes, design tokens, and one-off color combinations without uploading anything. That makes it safe to test customer-supplied palettes, internal color systems, and color combinations that have not been approved yet.
Aim for AAA where you can. AA is the legal floor in most jurisdictions, but AAA at 7:1 for normal text is what reads comfortably for the widest audience, including readers in bright sunlight, on low-quality screens, and with age-related vision loss. For long-form content, public-facing landing pages, and anything where reading speed matters, going for AAA where the palette allows is a small design change with a large legibility return.
If you're weighing options, Check Color Contrast From an Image: A Workflow Guide covers this in detail.