YRA Test Pages
← Back to dedup tests

Dedup across configurations — viewport-gated contrast

A scan target with three independent WCAG 1.4.3 (Contrast Minimum) violations, each gated by a CSS @mediaquery so the violation is only visible to a scanner whose configuration sets the browser viewport width inside the gate’s range:

  • Error Avisible only when viewport width is < 300px
  • Error Bvisible only when viewport width is 330–400px (inclusive)
  • Error Cvisible only when viewport width is 490–500px (inclusive)

Configure your project to scan this URL with at least one configuration in each range to exercise per-config dedup. Use a configuration with a viewport outside all three ranges (e.g. 800×600 or 1280×800) as the negative control — that scan should produce no contrast issue on any of the three targets.

Error A target (visible only when viewport < 300px)

This paragraph fails WCAG 1.4.3 only when the viewport width is below 300 CSS pixels. The cited contrast ratio in the issue description will be approximately 1.56:1 (#cfcfcf on #ffffff).

Error B target (visible only when viewport 330–400px)

This paragraph fails WCAG 1.4.3 only when the viewport width is between 330 and 400 CSS pixels inclusive. The cited contrast ratio will be approximately 2.32:1 (#aaaaaa on #ffffff).

Error C target (visible only when viewport 490–500px)

This paragraph fails WCAG 1.4.3 only when the viewport width is between 490 and 500 CSS pixels inclusive. The cited contrast ratio will be approximately 3.54:1 (#888888 on #ffffff).

Expected scan behavior

  • Configuration with viewport < 300 (e.g. 280px): exactly one contrast issue, on Error A’s target.
  • Configuration with viewport 330–400 (e.g. 360px or 390px): exactly one contrast issue, on Error B’s target.
  • Configuration with viewport 490–500 (e.g. 495px): exactly one contrast issue, on Error C’s target.
  • Configuration with viewport in none of the three ranges (e.g. 800px or 1280px): no contrast issue from this page.
  • After dedup, each of the three issues should resolve to its own unique row with provenance limited to the configuration(s) whose viewport landed in that gate’s range.

CSS @mediaqueries are evaluated by the browser engine against the configured viewport, so axe’s view (via getComputedStyle) reflects the gate. alfa applies its own CSS cascade against a Device built from the scan’s viewport dimensions, so it should also respect the gate — unlike the @supports case on /test-pages/dedup/by-config, there’s no known engine-detection quirk in play here.

Viewport debug

The block below reports the rendering browser’s viewport width and the currently-active gate, so the value lands in the rendered DOM and the scan screenshot. Comparing it across configurations confirms which gate each scan should have triggered.

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