Contrast ratio potential false-positive

[simshaun]

Hi,

I'm trying to figure out why Pa11y is reporting a color contrast issue.

I have the axe browser extension installed and it's not reporting any problems. Neither is Wave or a Lighthouse accessibility audit.

Expected behaviour

No color contrast issue should be reported. I thought maybe it was the stack of coins on the right, but the color ratio around there is ~6.66:1 according to WebAIM.

Actual behaviour

Pa11y reports a color contrast issue:

{
  documentTitle: 'Page',
  pageUrl: 'http://localhost:3000/',
  issues: [
    {
      code: 'color-contrast',
      type: 'error',
      typeCode: 1,
      message: 'Elements must meet minimum color contrast ratio thresholds (https://dequeuniversity.com/rules/axe/4.8/color-contrast?application=axeAPI)',
      context: '<div class="inner">\n      Lorem ipsum dolor sit am...</div>',
      selector: 'html > body > div > div',
      runner: 'axe',
      runnerExtras: {
        description: 'Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds',
        impact: 'serious',
        help: 'Elements must meet minimum color contrast ratio thresholds',
        helpUrl: 'https://dequeuniversity.com/rules/axe/4.8/color-contrast?application=axeAPI'
      }
    }
  ]
}

Steps to reproduce

I created a reproduction repo at https://github.com/simshaun/color-contrast-false-positive

Clone and start the server with npm run serve.
Test with pa11y: npm run pa11y

Environment

  System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 7800X3D 8-Core Processor
    Memory: 32.61 GB / 63.12 GB
  Binaries:
    Node: 20.11.1 - E:\NodeSwap\var\current\node.EXE
    npm: 10.2.4 - E:\NodeSwap\var\current\npm.CMD
  pa11y: 7.0.0

[danyalaytekin]

Hi @simshaun, thanks for using Pa11y, and for the detail in your report. I think this is related to:

• pa11y reports false positives for color contrast #633

To quote @dboulet's finding:

In some cases, when axe can’t determine the contrast ratio for certain elements... it will report the issue as “needs review”. The problem is that pa11y is currently reporting these review items as errors.

We've started work on fixing this and will return to it soon. As I progressed, I realised it needed a bit more thought regarding versioning. Just need to bring a few other Pa11y projects up-to-date first, and Pa11y itself to the latest Puppeteer version.

Here's the PR where the work will happen, if you'd like to track it:

• [WIP] Fix axe level translation #685