WCAG Contrast Ratio Calculator
Readable text needs enough contrast between the type and what sits behind it, and the WCAG contrast ratio is the standard measure of that gap. This calculator takes two colors, a foreground and a background, and returns the ratio between them along with the accessibility levels they pass. The method starts by finding each color's relative luminance, the perceived brightness on a 0 to 1 scale, then divides the lighter luminance plus 0.05 by the darker luminance plus 0.05. The small 0.05 term models the faint glow a screen emits even for black pixels, keeping the ratio finite. The answer runs from 1:1 for two identical colors up to 21:1 for pure black text on a pure white page. WCAG 2.2 sets clear thresholds: normal text needs 4.5:1 for level AA and 7:1 for AAA, while large text and interface elements can pass at 3:1. Enter two hex codes and the page shows the relative luminance of each color, the resulting ratio, and a pass or fail badge for the normal-text level. Use it to check a heading or body text against its background before you ship. Every figure is computed deterministically from the official formula, never estimated, with the method and a worked example shown below for verification.
Contrast is the lighter luminance over the darker, each plus a flare term: ratio = (L1 + 0.05) / (L2 + 0.05). Black on white gives the maximum 21.00:1, which passes WCAG AA and AAA for all text.
Contrast ratio formula
ratio = (L1 + 0.05) / (L2 + 0.05)
L1 = relative luminance of the lighter color
L2 = relative luminance of the darker color
relative luminance = 0.2126R + 0.7152G + 0.0722B on linearized channels
Each color's luminance comes from the linearized sRGB channels. The lighter value is always placed on top, so the ratio is at least 1:1 and at most 21:1.
Worked example
Compare black text (000000) on a white background (FFFFFF).
- White luminance L1 = 1.00
- Black luminance L2 = 0.00
- ratio = (1.00 + 0.05) / (0.00 + 0.05) = 1.05 / 0.05
- ratio = 21.00, written 21:1
- 21:1 exceeds 4.5:1 (AA) and 7:1 (AAA), so it passes for all text
Black on white gives 21.00:1, the maximum. These are the calculator's default inputs, so the result above matches the widget exactly.
WCAG 2.2 contrast thresholds
Minimum ratios required for each level and text size.
| Content | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| UI and graphics | 3:1 | n/a |
Color, luminance and accessibility measurement: US National Institute of Standards and Technology (NIST).
WCAG contrast ratio calculator: frequently asked questions
How is the WCAG contrast ratio calculated?
First the relative luminance of each color is found on a 0 to 1 scale. The contrast ratio is then (lighter luminance plus 0.05) divided by (darker luminance plus 0.05). The 0.05 term models ambient screen flare. The result ranges from 1:1 for identical colors to 21:1 for pure black on white.
What ratios pass WCAG?
For normal text, WCAG 2.2 level AA requires a ratio of at least 4.5:1 and level AAA at least 7:1. For large text, defined as 18 point or 14 point bold, AA requires 3:1 and AAA requires 4.5:1. User interface components and graphics need at least 3:1.
Why add 0.05 to each luminance?
The 0.05 constant represents viewing flare, the small amount of light that reflects off a screen even for black pixels. Adding it to both luminances keeps the ratio finite and matches how contrast is actually perceived in normal lighting.
Does the order of the two colors matter?
No. The formula always places the lighter color on top and the darker on the bottom, so swapping foreground and background gives the same ratio. You can enter text and background in either field.
Is the result computed automatically?
Yes. The page computes each color's relative luminance and the ratio deterministically, then shows which WCAG levels pass. No value is estimated or hard-coded, so changing either color updates the result instantly.
Official sources
- Color, luminance and accessibility measurement: US National Institute of Standards and Technology (NIST). As at 25 June 2026.
Reviewed by the CalculatorHub team, edited by James Graham, 25 June 2026. See our methodology. This is general information, not financial, tax, legal or investment advice.