Tools

Contrast

WCAG 2.2 and APCA, a scan of the page, and the nearest colour that passes.

Run a scan#

Open the side panel's Contrast tab. It scans straight away, and again whenever the selection changes. Choose Selection or Visible page for the scope, or press Rescan. The summary shows how many items fail AA and AAA, worst first.

Reading the results#

  • The contrast ratio, with an AA and AAA verdict
  • The font size and weight, marked large when the large-text rule applies (24px, or 18.67px bold)
  • The APCA Lc value, as advice
  • Needs pixel check for text over a picture, which cannot be judged from CSS alone

Hover a result to highlight the element on the page; click it to scroll to it and select it.

Fix it#

The Fix buttons copy the nearest colour that passes AA or AAA, at the same hue, checked across the element's whole background. Gradient backgrounds are sampled along every stop, so the worst case is the real one.