Color Contrast Checker

What a contrast ratio measures

Contrast ratio compares the relative luminance of two colors and returns a number from 1:1 (identical) to 21:1 (black on white). WCAG uses it to decide whether text is legible for people with low vision. The ratio is computed from the colors' luminance, not their hue, which is why two very different-looking colors can still fail if they are equally bright.

The thresholds you need to hit

For normal body text, AA requires 4.5:1 and AAA requires 7:1. Large text, defined as 18pt (24px) or 14pt (about 18.66px) bold, has an easier bar: 3:1 for AA and 4.5:1 for AAA. There is a separate 3:1 rule for non-text elements like icons, input borders, and focus indicators, which teams often forget.

Example

#767676 on #ffffff -> 4.54:1  -> passes AA for body text
#999999 on #ffffff -> 2.85:1  -> fails AA body, fails even large
#595959 on #ffffff -> 7.00:1  -> passes AAA

That jump shows how little room there is: nudging gray text from #999 to #767676 is the difference between failing and passing the body-text threshold.

Pitfalls

Contrast alone does not make a UI accessible. A color pair can pass 4.5:1 yet still be invisible to someone with a color-vision deficiency if the only cue is hue, so pair this with the color blindness simulator. Text over a gradient or photo must meet the ratio at its worst point, not its average, which usually means adding a scrim. Semi-transparent text is measured against the composited result, not the declared color.

FAQ

Does the ratio care which color is text? No, the formula is symmetric. Light text on dark gives the same ratio as the reverse.

What counts as large text exactly? 18.66px bold or 24px regular and up. Below that, the stricter 4.5:1 body rule applies.

Why did a passing pair fail after a theme tweak? Lightening a background or adding opacity changes the effective luminance; re-check after any color change, perhaps using the palette generator to find a compliant shade.