Color Contrast Checker

Enter the foreground text color and background color as three- or six-digit HEX values. The checker converts both colors to relative luminance and displays the ratio between the lighter and darker value.

Review the pass or fail results for the text size and conformance level your interface needs. Swapping the colors does not change the numeric ratio, but the preview helps you judge the visual role of each color.

A ratio of 1:1 means the two colors have the same relative luminance. The maximum 21:1 occurs between black and white. A higher number generally indicates greater light-dark separation, but conformance still depends on text size, weight, and context.

The calculation uses the sRGB relative luminance formula. It evaluates the two entered solid colors and does not inspect gradients, photographs, transparency, font rendering, hover states, or the rest of a live page.

Start by making the foreground darker on a light background or lighter on a dark background. If the color is part of a brand system, preserve its hue while adjusting lightness, then retest every interactive state that uses the token.

Do not rely on color alone to communicate an error, selection, or status. Pair the color with text, an icon, a pattern, or another visible cue so the interface remains understandable when hues are difficult to distinguish.

Passing a contrast threshold does not make a page fully accessible. Keyboard access, focus visibility, semantic structure, labels, zoom behavior, motion, and assistive-technology support still require separate testing.

Treat this checker as a fast design-stage test for solid color pairs. Confirm final components in their rendered states and include accessibility checks in design review and quality assurance.