How the contrast ratio is computed
WCAG 2.1 converts each sRGB channel to linear luminance, weights them into a single ‘relative luminance’ per color, and defines contrast as the ratio of the lighter to the darker. Adding 0.05 to each side is a flare-correction term.
- R,G,B — linearized sRGB channels (0–255): c/12.92 if c≤0.03928, else ((c+0.055)/1.055)^2.4 where c = channel/255
- L — relative luminance (0=black, 1=white)
More detail
Where does 4.5:1 come from?
WCAG 2.1 set the minimum contrast for normal text at 4.5:1, which compensates for the contrast sensitivity loss of a user with roughly 20/40 vision (about half of normal after correction) — 3:1 × 1.5 = 4.5:1. Large text (18pt+, or 14pt+ bold) has thicker strokes, so the bar relaxes to 3:1, while the strictest level, AAA normal text, requires 7:1. This calculator shows all three at once.
Design tip. Treat AA (4.5:1) as the floor and push important body text toward AAA (7:1). On a white background, gray #767676 lands at about 4.54:1 — just above the AA line — while #777777 lands at about 4.47:1, just below it: one shade of gray is the difference between pass and fail.
Frequently asked questions
What does a 4.5:1 contrast ratio mean?
It means the lighter color's (luminance + 0.05) is 4.5 times the darker color's (luminance + 0.05). That is the WCAG 2.1 AA minimum for normal text, chosen to compensate for the contrast sensitivity loss of a user with roughly 20/40 vision.
What is the difference between AA and AAA?
For normal text, AA requires 4.5:1 and AAA requires 7:1. Large text (18pt+, or 14pt+ bold) has thicker strokes, so the thresholds relax to AA 3:1 and AAA 4.5:1. AAA is the stricter level.
Is black-on-white the same as white-on-black?
Yes. The contrast ratio only looks at which of the two colors is lighter, so it is independent of order. Black and white always give 21:1, the maximum possible ratio.
My color is hex (#4F46E5) — how do I enter it?
Split the six hex digits into RR·GG·BB pairs and convert each to decimal. For example, #4F46E5 → R=4F (79) · G=46 (70) · B=E5 (229). You can run it through an RGB-to-HEX converter first if you prefer.
What happens if a channel is above 255 or below 0?
It is clamped to the 0–255 range (anything over 255 becomes 255, anything under 0 becomes 0), since sRGB channels are only defined within that range.