Skip to content

color-contrast false negative on latest chrome due to being partially obscured #1403

Description

@G-Rath

Describe the bug
For some reason on Chrome 151.0.7922.47 when scanning https://webtestingcourse.dequecloud.com/ at 320x450, //div[@id='footer']/div/h2 (aka "Visit our Brick & Mortar Store") is considered partially obscured when in fact it's not:

Image

This does not happen on other viewports such as 1280x800, or on older versions of Chrome such as 122.0.6261.39

To Reproduce

import { AxeBuilder } from '@axe-core/webdriverjs';
import type { AxeResults } from 'axe-core';
import { inspect } from 'node:util';
import { Builder } from 'selenium-webdriver';
import chrome from 'selenium-webdriver/chrome.js';

interface WindowSize {
  width: number;
  height: number;
}

async function checkPage(
  url: string,
  windowSize: WindowSize,
  chromeVersion: string
): Promise<AxeResults> {
  const options = new chrome.Options();

  options.addArguments('headless');
  options.windowSize(windowSize);

  const driver = new Builder()
    .forBrowser('chrome', chromeVersion)
    .setChromeOptions(options)
    .build();

  await driver.get(url);

  try {
    return await new AxeBuilder(driver)
      .options({
        xpath: true,
        resultTypes: ['violations'],
        runOnly: 'color-contrast'
      })
      .analyze();
  } finally {
    await driver.quit();
  }
}

const results = await checkPage(
  'https://webtestingcourse.dequecloud.com/',
  { width: 320, height: 450 },
  '151.0.7922.47'
  // '122.0.6261.39',
);

console.log(inspect(results, { colors: true, depth: Infinity }));

Run with

node reproduction.mts

Expected behavior
The header to be flagged as having a color-contrast issue regardless of viewport size

Screenshots
If applicable, add screenshots to help explain your problem.

Environment (please include versions for all products, browsers, OS, etc used ):

@axe-core/webdriverjs: 4.12.1
selenium-webdriver: 4.46.0
OS: linux (via WSL)

Additional context
I discovered this while working on the CWAC tool, specifically digging into the accuracy of our results - I might have more to share in the coming weeks.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions