Contrast Ratio Calculator

Contrast ratio is specifically a brightness measurement, not a general color-difference measurement — two colors of very different hue can share nearly identical luminance and fail a contrast check, while two colors with a big brightness gap but a similar hue can pass comfortably. WCAG chose luminance because readability depends primarily on being able to distinguish text from its background by brightness, which matters even for viewers with certain color vision deficiencies.

Human vision is far more sensitive to green light than to blue light at equal physical intensity, a property of the eye's cone cells rather than anything about the colors themselves. The WCAG luminance formula's weights — roughly 71% green, 21% red, and 7% blue — reflect that sensitivity difference, so changing the blue channel moves the contrast ratio much less than an equivalent change to the green channel.

The formula always divides the lighter color's luminance by the darker color's luminance, regardless of which one you labeled as foreground or background, so the calculation is symmetric by design. This matches how contrast actually works visually — light text on a dark background and dark text on the same light background produce identical readability, and identical ratios.

Larger characters have more surface area and more distinct strokes, which makes them legible at a lower brightness difference from the background than small text needs to remain readable. The W3C's WCAG 2.1 Success Criterion 1.4.3 reflects that by setting a 3:1 minimum (AA) for text at 18pt or larger — or 14pt bold — compared to the 4.5:1 minimum required for standard body-text sizes; SC 1.4.6 raises both bars further, to 4.5:1 and 7:1, at the stricter AAA conformance level.