What is the WCAG Color Contrast Ratio?
The contrast ratio measures how distinguishable two colors are from each other — typically text against its background. The Web Content Accessibility Guidelines (WCAG 2.x) use this ratio to set minimum thresholds so that content remains readable for people with low vision or color deficiencies. Ratios range from 1:1 (the two colors are identical) up to 21:1 (pure black on pure white).
How to use this calculator
Enter the foreground (text) color and the background color as hex values, such as #1a73e8 or the shorthand #fff. The calculator linearizes each color, computes its relative luminance, and returns the contrast ratio along with a pass/fail check against each WCAG threshold.
The formula explained
The ratio is \((L_1 + 0.05) / (L_2 + 0.05)\), where \(L_1\) is the relative luminance of the lighter color and \(L_2\) of the darker.
$$\text{Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05}$$Relative luminance is computed by converting each sRGB channel to a 0–1 value, linearizing it (channels at or below \(0.03928\) are divided by \(12.92\); brighter channels use \(\left(\frac{c+0.055}{1.055}\right)^{2.4}\)), then combining them as \(0.2126\,R + 0.7152\,G + 0.0722\,B\).
$$c_{lin} = \begin{cases} \dfrac{c}{12.92} & c \le 0.03928 \\[0.4em] \left(\dfrac{c+0.055}{1.055}\right)^{2.4} & c > 0.03928 \end{cases}$$$$L = 0.2126\,R_{lin} + 0.7152\,G_{lin} + 0.0722\,B_{lin}$$The \(0.05\) offsets prevent division by zero and model ambient screen flare.
Worked example
Black text (#000000) on white (#FFFFFF): black has luminance 0, white has luminance 1. The ratio is
$$\frac{1 + 0.05}{0 + 0.05} = \frac{1.05}{0.05} = 21:1$$— the maximum possible, comfortably passing every level.
FAQ
What contrast do I need? WCAG AA requires 4.5:1 for normal text and 3:1 for large text (≥18pt or 14pt bold). AAA requires 7:1 and 4.5:1 respectively.
Does color order matter? No. The formula always divides the lighter luminance by the darker, so swapping foreground and background gives the same ratio.
Why doesn't simple brightness work? Human perception of color is non-linear and weighted toward green, which is why luminance uses gamma correction and channel-specific coefficients rather than a plain average.
