WCAG Contrast Ratio Algorithm Tester

Step through the WCAG 2.x relative luminance formula with full intermediate values shown

Ad placeholder (leaderboard)

If you are implementing WCAG contrast checking in code, a single wrong constant or a misplaced gamma step silently shifts every result. This tool runs the WCAG 2.1 formula one step at a time and prints every intermediate value, so you can diff your own implementation against the spec channel by channel.

How it works

For each of the two colours the tool walks the relative-luminance computation:

  1. Normalise — divide each sRGB channel by 255 to get a value in the range 0 to 1.
  2. Linearise (gamma correction) — values at or below 0.03928 are divided by 12.92; higher values use ((c + 0.055) / 1.055) raised to the power 2.4.
  3. Weight and sum — multiply the linear channels by 0.2126 (R), 0.7152 (G), and 0.0722 (B) and add them to get the relative luminance L.

With both luminances in hand it computes the contrast ratio:

contrast = (L_lighter + 0.05) / (L_darker + 0.05)

The 0.05 flare term and the lighter-over-darker ordering mean the ratio always runs from 1:1 up to a maximum of 21:1.

Example and thresholds

Test #595959 on #ffffff and you can follow each channel from its 0–255 value, through normalisation, into its linear value, and watch the weighted sum produce the luminance — ending in a ratio of about 7.0:1. The tool then checks that ratio against the conformance thresholds:

  • Normal text: 4.5:1 for AA, 7:1 for AAA.
  • Large text (about 18pt, or 14pt bold): 3:1 for AA, 4.5:1 for AAA.

Because every intermediate value is shown, this is the fastest way to confirm a contrast library is producing spec-correct numbers rather than just a final pass or fail.

Ad placeholder (rectangle)