Contrastproof
Writing

Why two contrast checkers give you different answers

2 min read

Key takeaways

  • The WCAG contrast formula is fixed arithmetic. Two tools given the same pair of opaque colors must agree, and one of them is wrong if they do not.
  • Disagreements come from which colors the tool resolved, not from how it divided them.
  • The four usual causes are alpha transparency, an inherited background, a background image or gradient, and text the tool never saw because it had not rendered.
  • A tool that reports zero failures on a page full of hero imagery is telling you something it cannot know.
  • A colour-pair checker cannot answer this at all, because you are the one choosing which two colors to type in.

It is never the arithmetic

Contrast ratio is (lighter + 0.05) / (darker + 0.05) over relative luminance in sRGB. There is no interpretation in it. Black on white is 21:1 everywhere, forever.

So when a tool says 4.4:1 and another says 6.1:1, they are measuring different colors. The interesting question is always which one resolved the page correctly.

The four things that actually differ

Alpha. Text set in rgba(0,0,0,0.6) is not black. It is whatever it composites to over its backdrop. Alpha compositing has to be resolved before measurement, and a tool reading the declared value rather than the painted one will report a far better ratio than reality.

Inherited backgrounds. An element with no background of its own sits on whatever ancestor last painted one. Finding that ancestor means walking up the tree; guessing means assuming white, and assuming white flatters almost every result.

Images and gradients. Text over a photograph has no single background color, so there is no honest ratio. The correct output is not a number, it is a flag saying a human has to look.

Text that never rendered. Lazy sections, reveal-on-scroll, content behind a tab, a closed menu. A tool that loads the page and measures immediately misses whatever had not painted yet, and reports a clean sheet.

The opposite failure: counting things nobody sees

Over-reporting is just as damaging to trust. Links inside a closed mega-menu are in the DOM, are technically rendered, and will happily fail a contrast check while being invisible to every user.

We hit this while choosing a demo for our own home page. One site reported 79 failing elements, and every one of them was a nav link inside a collapsed dropdown. We dropped the site rather than lead with a number that would have been technically true and practically misleading.

How to tell which answer to trust

  • —Ask what background the tool used. If it cannot tell you, it guessed.
  • —Check whether it reports an 'unknown' category at all. A tool with no way to say 'I cannot tell' will silently invent an answer for text over images.
  • —Check whether it scrolled. If it did not, it only measured your first viewport.
  • —Confirm the two colors by hand for one finding. The arithmetic is simple enough to verify, and once one number checks out the method behind it usually does too.

Common questions

Why does WebAIM give me a different ratio than my browser devtools?
Because you typed two colors into WebAIM and the browser resolved the ones that actually painted. If the text has any alpha, or sits on an inherited or translucent background, the painted colors differ from the declared ones.
Can a contrast checker be wrong?
The arithmetic cannot be, but the inputs can. Almost every disagreement between tools comes from which foreground and background colors were resolved, particularly around alpha transparency and inherited backgrounds.
What should a tool report for text over a photo?
That it cannot determine the background. There is no single background color, so no honest ratio exists, and a tool that reports one is guessing.

Find out which of these your own site does.

Free, no account, usually under 30 seconds.