What is the Contrast Ratio Calculator?
This tool computes the color contrast ratio between a foreground color and a background color using the official WCAG 2.x formula. Contrast ratio is a key accessibility metric: it tells you whether text will be readable for people with low vision or color deficiencies. Values range from 1:1 (identical colors, invisible text) to 21:1 (pure black on pure white).
How to use it
Enter the red, green and blue components (0–255) for your foreground (text) color and your background color. The calculator linearizes each channel, computes the relative luminance of both colors, and divides the lighter by the darker after adding the 0.05 ambient-light constant. It then reports whether the pair passes WCAG AA and AAA for normal and large text.
The formula explained
The contrast 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. Relative luminance is computed by first scaling each channel to 0–1, then applying a gamma transform: if the scaled value is ≤ 0.03928 it is divided by 12.92, otherwise it is raised through \(((c+0.055)/1.055)^{2.4}\). The linearized channels are combined as \(0.2126\cdot R + 0.7152\cdot G + 0.0722\cdot B\), reflecting the eye's higher sensitivity to green.
$$\text{Contrast} = \frac{L_1 + 0.05}{L_2 + 0.05}$$$$\text{where}\quad \left\{ \begin{aligned} L_1 &= \max(L_{fg},\, L_{bg}) \\ L_2 &= \min(L_{fg},\, L_{bg}) \\ L &= 0.2126\,R_{\ell} + 0.7152\,G_{\ell} + 0.0722\,B_{\ell} \\ C_{\ell} &= \begin{cases} \dfrac{C/255}{12.92} & C/255 \le 0.03928 \\[0.6em] \left(\dfrac{C/255 + 0.055}{1.055}\right)^{2.4} & \text{otherwise} \end{cases} \end{aligned} \right.$$
Worked example
Black text (0,0,0) on white (255,255,255): black luminance = 0, white luminance = 1. Ratio = $$\frac{1 + 0.05}{0 + 0.05} = \frac{1.05}{0.05} = 21{:}1$$ 21:1 — the maximum possible contrast, which easily passes every WCAG level.
FAQ
What ratio 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 add 0.05? The constant models ambient screen flare so that even pure black against pure black yields a defined, non-infinite value.
