How to Calculate a WCAG Contrast Ratio — The Formula Explained Simply
Table of Contents
The WCAG contrast ratio formula is precise but not intuitive — it involves relative luminance, gamma correction, and a specific weighting for each RGB channel. You almost certainly do not want to do this by hand. But understanding the formula helps you understand why some seemingly "dark" colors have surprisingly low ratios and why some seemingly "similar" colors have surprisingly high ones.
What the contrast ratio formula actually measures
The contrast ratio measures perceptual brightness difference — specifically, the ratio between the relative luminance of two colors. Luminance is a measure of how much light a color appears to emit, regardless of its hue. A bright yellow and a bright white may appear different in hue but have similar luminance values (and therefore low contrast between them). A dark navy and a bright white have very different luminance values (high contrast).
The formula does not care about hue — blue on orange may "look" contrasty because the hues are different, but if both colors have similar luminance values, the actual contrast ratio may be low. This is why "colorblind-friendly" and "accessible" are related but not the same thing.
Step 1: Convert RGB channel values to linearized values
Starting from a hex code like #4A90E2, break it into R=74, G=144, B=226 (as 0-255 integers).
Divide each by 255 to get values in the 0-1 range: R=0.290, G=0.565, B=0.886.
Apply the linearization (gamma correction) to each channel:
- If the channel value is less than or equal to 0.04045: divide by 12.92
- If the channel value is greater than 0.04045: calculate ((value + 0.055) / 1.055) raised to the power of 2.4
This step converts from the sRGB color space (how screens encode colors) to linear light values. The formula without this step would give incorrect results because screen color encoding is not linear.
Sell Custom Apparel — We Handle Printing & Free ShippingStep 2: Calculate relative luminance
After linearizing each channel, compute relative luminance using the WCAG-specified weighting:
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
The weighting (0.2126 for red, 0.7152 for green, 0.0722 for blue) reflects human visual perception: our eyes are most sensitive to green light, less so to red, and least to blue. A pure green (#00FF00) has relative luminance of about 0.715. Pure red (#FF0000) is about 0.213. Pure blue (#0000FF) is only 0.072.
This is why "blue on black" has lower contrast than you might expect — pure blue (#0000FF) on black (#000000) is about 2.4:1, well below the 4.5:1 threshold.
Step 3: Calculate the final contrast ratio
With the relative luminance of each color (L1 and L2, where L1 is the higher value):
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
The +0.05 offset prevents division by zero when one color is pure black (luminance = 0) and accounts for the slight glow a perfect black displays in reality.
The result is expressed as a ratio like 4.5:1 or 7.3:1. The minimum is 1:1 (identical colors) and the maximum is 21:1 (pure white vs pure black).
For reference: white (#FFFFFF) has luminance 1.0. Black (#000000) has luminance 0. The contrast between them: (1.0 + 0.05) / (0.0 + 0.05) = 1.05 / 0.05 = 21:1.
Why you should use the free tool instead of calculating manually
The formula is three steps, but each step involves non-trivial arithmetic that is easy to get wrong — especially the gamma correction, which requires raising a number to the power of 2.4. Doing this for two colors and then comparing is realistic in code but tedious and error-prone by hand.
The Color Contrast Checker applies the exact W3C formula to any two hex codes in under a millisecond, shows all four WCAG pass/fail results simultaneously, and updates live as you adjust colors. It is strictly better than manual calculation for any design or development workflow.
Knowing the formula helps you develop intuition — understanding why blue on black fails, why yellow on white fails, and why near-black text on white nearly always passes. But for actual checking, use the tool.
Try It Free — No Signup Required
Runs 100% in your browser. No data is collected, stored, or sent anywhere.
Open Free Contrast CheckerFrequently Asked Questions
Is the contrast ratio the same regardless of which color is foreground vs background?
Yes. The contrast ratio is always expressed as the ratio of the lighter luminance to the darker luminance, regardless of which color is on top. White text on black and black text on white both have a contrast ratio of 21:1.
Why does my contrast checker give a slightly different number than another tool?
Small discrepancies can occur due to rounding differences in the gamma correction step. Both tools are using the same formula, but floating point arithmetic can vary slightly. If the discrepancy is larger than 0.1, one tool may be using an incorrect or simplified formula.
Tyler spent six years in IT support where file format conversion was a daily challenge. He became the go-to expert on image, document, audio, and video compatibility before transitioning to writing full-time.
More articles by Tyler →