Contrast Checker

The Contrast Checker measures the luminance contrast ratio between a foreground color (usually text) and a background color, then compares it against the thresholds defined in the Web Content Accessibility Guidelines (WCAG). Contrast ratios run from 1:1 (identical colors, invisible) up to 21:1 (pure black on pure white), and accessibility standards require minimums that depend on text size and conformance level. This tool computes the exact ratio for any color pair you enter so you can confirm your design choices are legible to the widest possible audience, including users with low vision or color blindness.

Under the hood, the checker converts each color from its sRGB hex or RGB representation into relative luminance using the WCAG formula, which applies a gamma correction to each channel and weights green most heavily, then red, then blue, to approximate human perception. The contrast ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker one's. Because the math is deterministic, the same color pair always yields the same ratio, making it a reliable acceptance test in design reviews.

WCAG defines four common targets: AA requires 4.5:1 for normal text and 3:1 for large text (roughly 18pt or 14pt bold and above), while AAA tightens those to 7:1 and 4.5:1 respectively. Non-text UI components and graphical objects, such as icons and input borders, generally need 3:1. The checker reports your ratio against each of these bands so you can see at a glance whether a combination passes AA, AAA, both, or neither.

Use this tool when picking palette colors, defining design tokens, or auditing an existing interface for compliance, and pair it with a Gradient Generator or color palette tool to test how text reads against varied backgrounds. A practical tip: if a color pair narrowly fails, darkening the text or lightening the background by even a few percent often pushes it over the threshold without a noticeable visual change, and you should always test the actual rendered colors rather than your intended values, since opacity and overlays can lower effective contrast.