YRA Test Pages
← Back to test pages

Dedup across configurations — per-engine contrast

A scan target whose contrast violation is browser-engine specific. The labelled paragraph below renders at roughly 1.5:1on WebKit (Safari, Playwright’s WebKit) and roughly 18:1 on Chromium and Firefox.

Use this page to validate that the Monitor’s issue deduplication groups instances reported only by the WebKit configurations in a multi-config project, and that the same logical issue does not appear under Chromium- or Firefox-only configurations.

Your current browser is rendering this page as: WebKit — low-contrast branch (should fail contrast)Chromium or Firefox — high-contrast branch (should pass contrast)

Test target paragraph

This paragraph should fail WCAG 1.4.3 (Contrast Minimum) only when scanned with a WebKit-backed browser configuration.

How the engine split is achieved

A tiny client component reads navigator.userAgent and, when the rendering engine is Apple WebKit (UA contains AppleWebKit but not Chrome, Chromium, or Edg), adds an engine-webkit class to <html>. The default color is #1a1a1a on #ffffff (high contrast); a stylesheet rule scoped to html.engine-webkit overrides the target paragraph to #cfcfcf on #ffffff, which falls below the 4.5:1 threshold for normal-size text.

This page previously used @supports (background: -webkit-named-image(i)) to gate the low-contrast rule. We switched to JS-applied class detection because Playwright’s bundled engines don’t mirror desktop browser feature-query support reliably, and because Siteimprove’s alfa engine applies @supports blocks unconditionally for unrecognised vendor features, causing false-positive contrast errors on Chromium and Firefox scans of this page.

Expected scan behavior

  • WebKit configuration: a contrast issue is reported on the paragraph above.
  • Chromium configuration: no contrast issue is reported for that paragraph.
  • Firefox configuration: no contrast issue is reported for that paragraph.
  • After dedup, the contrast issue should resolve to a single unique issue with instance provenance limited to the WebKit run(s).

Engine debug

The block below reports several engine-discriminating signals as observed by the rendering browser. The values land in the rendered DOM (and the scan screenshot), so comparing the block across Playwright’s Chromium / Firefox / WebKit captures tells us empirically which features each engine satisfies — useful when picking a detection method.

(script has not run — JS may be disabled or page has not hydrated yet)