Contrast

Run a scan#

1. Open the side panel's Page tab and choose Accessibility. Contrast sits below the touch targets. It scans straight away, and again whenever the selection changes.
2. Choose Selection or Visible page for the scope, or press Rescan.
3. The summary shows how many items fail AA and AAA, worst first.

Hover, focus and disabled#

A link can pass at rest and fail when hovered, if only its colour changes. Choose Control states in place of All text to read every link, button and form control in the scope at rest, hovered and focused. Each row shows a chip per state with its ratio, green when it passes AA and red when it fails, and the controls that fail only in a state come first.

Nothing is hovered or focused for real: the page's own :hover, :focus and :focus-visible rules are applied to the control, the way Force state does, with transitions held off, and everything is put back. A disabled control is shown with its ratio in grey: WCAG 1.4.3 exempts inactive controls, so it never counts as a failure. The first 300 controls are read; rules in stylesheets from another site cannot be.

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.

The Report menu under it copies or downloads what fails AA as Markdown: each text, its ratio against what AA asks, its colours and the nearest colour that passes, then any text over a picture to check by eye.

Contrast is one of the accessibility checks, beside touch targets, headings and tab order and the full audit.