Color contrast decides whether real people can actually read your text. The Color Contrast Checker measures the WCAG contrast ratio between any two colors and tells you whether the pair is safe for normal text, large text, and interface elements. This guide explains where the numbers come from, what the thresholds mean, and how to fix a failing combination.
How the contrast ratio is calculated
Contrast is not a simple difference of color values — it is based on relative luminance, a model of perceived brightness. Each color's red, green, and blue channels are normalized to 0–1, converted from gamma-encoded sRGB to linear light, then weighted (0.2126 red, 0.7152 green, 0.0722 blue) and summed. Green carries the most weight because the human eye is most sensitive to it.
The two luminance values feed the ratio (L_lighter + 0.05) / (L_darker + 0.05). The 0.05 constant accounts for ambient light reflecting off the screen. The result runs from 1:1 (the same color) to 21:1 (pure black on pure white). When a foreground color is semi-transparent, this tool composites it over the background first, because that is what a viewer actually sees.
What the thresholds mean
WCAG defines tiers. For normal body text, AA requires 4.5:1 and AAA requires 7:1. For large text — at least 24px regular or 18.66px bold — the bars relax to 3:1 (AA) and 4.5:1 (AAA), because bigger glyphs are inherently easier to read. A separate rule, WCAG 1.4.11, sets a 3:1 minimum for non-text elements: icons, input borders, focus indicators, and the meaningful parts of charts and graphs.
AA is the practical baseline. Most accessibility laws — the ADA in the U.S., the European Accessibility Act, Section 508 — point at WCAG AA. Hitting AAA everywhere is admirable but not always achievable for brand colors; AA for body text plus 3:1 for UI is the realistic target for most products.
Fixing a failing pair
When a combination fails, the usual culprit is a foreground color that is too close in lightness to the background. The cleanest fix is to adjust the text color's lightness while preserving its hue, so the design still feels on-brand. This tool's Fix Suggestions tab does exactly that — it steps the text color darker and lighter until it crosses 4.5:1, and reports the smallest change that passes.
Two caveats. First, contrast is necessary but not sufficient: color should never be the only way you signal meaning, since color-blind users may not perceive the difference. Second, large background images and gradients defeat a single-ratio check — test the worst-case spot where text overlaps the lightest or darkest part of the image.