A color contrast checker measures the WCAG contrast ratio between two colors using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color, with results ranging from 1:1 (identical colors) to 21:1 (pure black on pure white). Each color channel is first converted from sRGB to linear light, then combined into a relative luminance value using the weights 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The resulting ratio maps directly to the WCAG conformance levels: at least 4.5:1 for normal-text AA, 3:1 for large-text AA, 7:1 for normal-text AAA, 4.5:1 for large-text AAA, and 3:1 for non-text elements such as icons and UI components. A practical checker shows all of these thresholds at once, so you can read the ratio and immediately see which standard a foreground and background pair clears. Color Contrast Checker follows that exact formula and reports pass or fail badges for normal text, large text, and UI components in real time.
WCAG Threshold Numbers at a Glance
Every color contrast example you evaluate ultimately resolves to one of five well-defined thresholds. The table below captures them exactly as the Web Content Accessibility Guidelines define them, per the W3C's Contrast (Minimum) understanding document.
| Element type | AA minimum | AAA minimum |
|---|---|---|
| Normal text (under 18pt regular or 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt+ regular, or 14pt+ bold) | 3:1 | 4.5:1 |
| UI components, icons, focus indicators, form field borders | 3:1 | — |
Large text gets a lower bar because thicker, bigger letterforms are easier to read at a given luminance difference. UI components and graphical objects do not have a separate AAA tier — the AA 3:1 minimum is the official requirement per WCAG 2.x.
How to Check a Color Pair in Three Steps
Testing any foreground and background combination against the table above takes only a few moments with a real-time checker. The procedure works the same way for validating a brand palette, fixing a single button, or auditing an entire design system.
- Set the foreground (text) color using the color picker or by typing a hex value such as #111111.
- Set the background color the same way, for example #ffffff.
- Read the contrast ratio and the AA and AAA pass or fail badges, then adjust either color until it meets the level you need.
Because the contrast ratio is symmetric — it depends only on the two colors and not on which is text and which is background — you can swap foreground and background without changing the result. This makes iteration fast: pick a starting palette, drop the two hex values into the checker, and read the verdict in real time.
Common Color Contrast Examples Across the Spectrum
Concrete examples make the thresholds easier to internalize. The most extreme case is pure black (#000000) on pure white (#ffffff): its relative luminance values are 0 and 1, so the ratio is (1 + 0.05) / (0 + 0.05) = 1.05 / 0.05, which equals 21:1 — the mathematical maximum. That pair clears every WCAG threshold by a wide margin and is often cited as the gold standard for body copy.
Most real designs sit far below that ceiling. Dark gray body text on a white background, a common pattern in long-form articles, often hovers near the AA boundary — close to or just above 4.5:1 for normal text but well short of the AAA 7:1 mark. Mid-gray text on a light background typically fails AA outright because the luminance gap narrows quickly. Brand colors such as a saturated blue on white or a deep red on cream can land anywhere on the spectrum depending on how dark the brand tint is, which is why running them through Color Contrast Checker rather than eyeballing them is the safer move. For a fuller walk-through of the math behind these ratios, the formula and thresholds guide covers each weighting and large-text definition in detail.
Once a brand color is paired with a near-white background, the next common check is the inverse — light text on a dark brand background — for things like hero sections and modal dialogs. Because the ratio is symmetric, you can preview the result instantly: if dark text on light passes AA, light text on dark passes AA as well. The cases that tend to surprise designers are pastel brand colors on white, which often fail at normal sizes yet can still pass for large text at the 3:1 AA minimum.
Edge Cases That Often Fail a Contrast Check
The contrast ratio is a clean number, but real interfaces are not. A handful of situations routinely break readability even when the headline hex values look fine on paper.
- Gradients and semi-transparent overlays. The effective background changes across the element, so test against the lightest and darkest points a letter can sit on. A ratio that passes at one end of a gradient can fail at the other.
- Text placed on images. A photograph behind body text shifts the perceived contrast zone by zone. Treat the brightest and darkest regions of the image as separate backgrounds and test each.
- Placeholder text and disabled states. Browser default placeholder colors and many framework-level disabled styles drift below the 4.5:1 line. These are easy to miss but common failure spots.
- Thin decorative fonts. Light weights need more contrast than bold weights because thinner strokes lose definition at lower ratios. AA is a floor, not a ceiling, especially for thin type.
- Relying on color alone. Contrast measures luminance, not hue. Red on green can fail even though the colors look distinct to many viewers, which is why WCAG asks you to pair color with a text label, icon, or underline.
Color vision deficiency is widespread — men are far more likely than women to have some form of it — and millions more read with low vision, cataracts, or on cheap screens in bright sunlight. Sufficient luminance contrast is what keeps body copy, buttons, and error messages legible across all of those situations.
Where Contrast Checks Fit in Real Workflows
Contrast checks are not a final-step chore. The earlier in a design process they happen, the less rework is needed later. Brand palette definition is the first natural checkpoint: any primary or secondary color that will appear as text against a known background should be validated before it enters the design system. From there, every component that ships — buttons, form fields, navigation links, error messages, tooltips — is a candidate for a quick check.
Legal exposure is part of the picture. The Americans with Disabilities Act is routinely applied to websites in the United States, Section 508 mandates accessibility for federal agencies, and the European standard EN 301 549 references WCAG directly for public-sector sites. Failing AA on a primary call to action can mean remediation work after launch, which is materially more expensive than fixing it during the design phase.
Everything runs locally in your browser, so you can iterate on brand palettes and design tokens privately without uploading anything. Drop your hex values into Color Contrast Checker, read the pass or fail badges, and adjust until the pair clears the level your audience needs.