WCAG Contrast Ratio Calculator
Written by Thierno Sadou Diallo, formula verified per our methodology • Last checked on 9/9/2026
The WCAG contrast ratio is calculated from the relative luminance of each color: ratio = (lighter luminance + 0.05) ÷ (darker luminance + 0.05). The maximum possible contrast, black on white, reaches exactly 21:1.
Explanation
The WCAG (Web Content Accessibility Guidelines) recommendations, the international reference for digital accessibility, define minimum contrast thresholds between text and its background, to ensure sufficient readability for people with low vision or color blindness. The calculation relies on each color's relative luminance, a measure of its perceived brightness that accounts for the fact that the human eye perceives green as brighter than red, and red as brighter than blue, at equal intensity (hence the different weighting coefficients for each color channel, derived from video broadcast standards). The specification's official thresholds distinguish several compliance levels: a ratio of at least 4.5:1 for AA level on normal text (the most commonly required level, notably under digital accessibility regulations in many countries), 3:1 for large text (generally 18 points or more, or 14 points bold), and 7:1 for the stricter AAA level on normal text. This calculator complements our RGB to hex conversion calculator: once a color palette is chosen for a site or app, checking the contrast between text and its background is an essential step before publishing, to ensure the content stays readable for as many users as possible. This same readability requirement extends to visuals using standard proportions, like those calculated by our aspect ratio calculator.
Example: black text on a white background
Inputs
Color 1: black (0, 0, 0). Color 2: white (255, 255, 255).
Calculation
Black's relative luminance is 0, white's is 1. Ratio = (1 + 0.05) ÷ (0 + 0.05) = 1.05 ÷ 0.05 = 21.
Result
The contrast between black and white reaches 21:1, the maximum possible, comfortably meeting every WCAG level.
Frequently asked questions
What contrast level should a website aim for?
The AA level (4.5:1 for normal text, 3:1 for large text) is the minimum level generally required by digital accessibility regulations in many countries, and represents a good compromise between readability and design freedom. The stricter AAA level (7:1) is recommended for content where accessibility is especially critical, but can further limit the available color choices.
Why does green count for more than red and blue in the luminance calculation?
Because the human eye is physiologically more sensitive to variations in green than to variations in red or blue, at equal light intensity: this is why the official formula weights the green channel at 71.52%, versus 21.26% for red and only 7.22% for blue. These coefficients aren't arbitrary; they're derived from the color perception standards used in video broadcasting.
Why is a gamma correction applied to each color before the calculation?
Because digital RGB values (0 to 255) don't vary linearly with actual perceived brightness: a pixel at 128 (numerically halfway between 0 and 255) isn't perceived as half as bright as a pixel at 255, due to how screens encode brightness. Gamma correction converts each RGB value into a physically consistent linear value before calculating relative luminance.