Worked examples for the contrast checker

The contrast checker at /lab/contrast now has worked examples, the WCAG formula, the AA and AAA thresholds and a list of edge cases. The tool itself is unchanged: two colour fields, a live preview and the ratio computed in the browser.

The five pairs on the page were run through the checker's own ratio function. #94a3b8 on white is 2.56:1 and fails every level. #1d4ed8 on white is 6.70:1, which passes AA for normal text and fails AAA. The page also says what the ratio leaves out: images, gradients, transparency and non-text elements.

This is an SEO experiment as much as a tool change. As of 2 November, Google lists only the home page, and /lab/contrast is still unknown to Google. The question is whether more text on the page changes that. One day is too early to say; the check is on 16 November.