Color Contrast Ratio
Calculator

The calculator computes each color's relative luminance from its RGB values using the WCAG formula, then divides the lighter luminance by the darker one (plus a small offset), giving a ratio expressed as X:1. Black on white produces the maximum possible ratio of 21:1.

WCAG 2.1 requires a minimum of 4.5:1 for normal body text and 3:1 for large text (18pt+ or 14pt+ bold) to meet Level AA, while Level AAA raises those thresholds to 7:1 and 4.5:1 respectively. Falling short of these ratios means text may be hard to read for users with low vision.

Human eyes perceive green as brighter than red or blue at the same numeric intensity, so the WCAG luminance formula weights each RGB channel differently (giving green the most weight) before combining them, producing a result that reflects actual perceived brightness rather than a naive average of the RGB values.

Contrast ratio depends specifically on luminance (lightness), not hue or saturation, so two colors can be very different in appearance, like a saturated orange and a saturated blue, but have similar luminance and therefore poor contrast against each other. This is why colorblind-safe design still requires checking actual contrast, not just visual color difference.

WCAG also sets a lower 3:1 minimum for non-text elements like button borders, form field outlines, and icons that convey important information, recognizing that these need to be distinguishable but don't require the same reading-focused contrast as body text. The same luminance-ratio calculation applies, just with a different passing threshold.