Contrast Ratio Calculator

Calculate the exact WCAG contrast ratio between any two colors. See the relative luminance values, the ratio and the AA/AAA pass results — all with the math laid out so you can verify it yourself.

Large heading sample
Normal body text sample. This is how your text will look at regular size on the chosen background.
14.32:1
WCAG Contrast Ratio
AA Normal (≥4.5:1)
Pass
AA Large (≥3:1)
Pass
AAA Normal (≥7:1)
Pass
AAA Large (≥4.5:1)
Pass

Calculation Breakdown

What Is the WCAG Contrast Ratio?

The WCAG contrast ratio is a number that expresses how distinguishable two colors are, based on how the human eye perceives luminance. It ranges from 1:1 (identical colors) to 21:1 (black on white). Higher ratios mean more distinguishable colors and more readable text.

The Calculation

The formula is defined in the W3C WCAG 2.2 specification:

Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the relative luminance of the lighter color,
and L2 is the relative luminance of the darker color.

Relative luminance formula (per channel):
  c = channel / 255
  if c ≤ 0.03928:  c' = c / 12.92
  else:            c' = ((c + 0.055) / 1.055) ^ 2.4

  L = 0.2126 × R' + 0.7152 × G' + 0.0722 × B'

What the Ratio Means

  • 1:1 to 2:1: Almost invisible — fails all WCAG levels.
  • 3:1: Minimum for AA Large (18pt+ or 14pt+ bold).
  • 4.5:1: Minimum for AA Normal — the baseline for all text.
  • 7:1: Minimum for AAA Normal — recommended for critical content.
  • 21:1: Maximum possible (black on white).

Frequently Asked Questions