Color contrast checker

A color contrast checker must measure the colors people will actually see

A contrast ratio compares the relative luminance of a foreground and its adjacent background. Enter #RGB, #RRGGBB, numeric rgb(r, g, b) channels from 0 to 255, or hsl(h, s%, l%) with an optional deg unit on hue. #RGBA and #RRGGBBAA foregrounds can carry alpha; they are composited over the required opaque background first. Calculating luminance from the uncomposited RGB channels would measure a color that never appears on screen.

The background must be opaque because a translucent background has no single visible color without the surface behind it. The page declines that incomplete pair instead of assuming white. Swap foreground and background when both are opaque and the ratio is unchanged. With foreground alpha, swapping would create an invalid translucent background, so the control is disabled and explains that boundary rather than presenting a misleading reversed result.

WCAG 2.2 text thresholds, named separately

WCAG 2.2 Success Criterion 1.4.3 requires a ratio of at least 4.5:1 for normal text at level AA and 3:1 for large text. Level AAA raises those thresholds to 7:1 and 4.5:1. The receipt shows all four outcomes instead of one green badge that hides which claim passed.

Large text means at least 18 points when regular or 14 points when bold. In the common 96 dpi CSS conversion, those sizes are about 24 px and 18.67 px, but the real component still needs the stated size and weight. A ratio cannot inspect your stylesheet or prove which threshold applies. Use the result that matches the text actually rendered.

Non-text contrast is a different criterion

WCAG 2.2 Success Criterion 1.4.11 uses a 3:1 threshold for the visual information needed to identify user-interface components and graphical objects against adjacent colors, with scoped exceptions. A border, focus indicator, chart line, or icon may need a different comparison from the label inside it. The page reports the non-text threshold separately and does not imply that a passing text pair settles every state of a control.

Contrast is also different from color-vision simulation. The color blind simulator transforms a complete image with a published model to reveal hue-dependent distinctions. It does not calculate WCAG ratios. This checker calculates one pair and does not predict a person's vision. Both can reveal problems; neither replaces labels, shapes, state review, keyboard testing, or assistive technology checks.

A passing pair is evidence, not conformance

The exact ratio proves only the entered pair after any alpha composition. A page can use the wrong color in hover, disabled, visited, focus, error, or selected states. Text may be smaller or lighter than assumed. Meaning may depend on color alone. Images of text, gradients, antialiasing, overlays, and adjacent surfaces can require additional measurements. Full WCAG conformance is a claim about the complete page and all applicable criteria, not two color fields.

Measure representative default, hover, focus, pressed, selected, error, and disabled states individually. Also sample boundaries beside gradients, photography, shadows, and translucent overlays. Those contexts can expose a weaker adjacent color than the design token name alone suggests.

Calculation and preview happen entirely in this tab. No color is uploaded, stored, or added to the URL. If the pair came from a local asset, the color palette extractor can identify source colors without sending the image away. The alt text checker covers a separate publishing requirement rather than being folded into a misleading accessibility score.