Contrast false positives returned by pa11y->axe

[geoffroy-noel-ddh]

pa11y 6.2.3 returns too many false positive issues about contrast.

Example:

The reported text does pass AAA contrast requirements.

[geoffroy-noel-ddh]

This is a known issue in Pa11y, which should be fixed in version 8. Pa11y doesn't distinguish warnings (due to uncertainty given the use of pseudo-classes) with actual errors from axe-core.

So, when ready, we should upgrade to latest version of Pa11y that fixes this.

Until then, we could ignore those specific contrast messages from axe-core when relayed by Pa11y. The hope is that contrast issues are correctly picked up by the other engine, html_codesniffer (CS) and are redundant anyway. So ensuring that this is the case and that CS suppresses Axe rather than the opposite could be a work-around.

[geoffroy-noel-ddh]

Example of output below with correct detection of insufficient contrast by both engines.

node docs/evaluate.js thornton

            baseUri = 'https://design.homeoffice.gov.uk'
            webpath = '/accessibility/colour-and-contrast'

{
  documentTitle: 'Colour and contrast - Home Office Design System',
  pageUrl: 'https://design.homeoffice.gov.uk/accessibility/colour-and-contrast',
  issues: [
    {
      code: 'WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.Fail',
      type: 'error',
      typeCode: 1,
      message: 'This element has insufficient contrast at this conformance level. Expected a contrast ratio of at least 4.5:1, but text in this element has a contrast ratio of 1.02:1. Recommendation:  change background to #000.',
      context: '<p style="color:yellow">Bad example text in yellow. Hav...</p>',
      selector: '#main-content > div > div:nth-child(2) > div:nth-child(27) > p',
      runner: 'htmlcs',
      runnerExtras: {}
    },
    {
      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: '<p style="color:yellow">Bad example text in yellow. Hav...</p>',
      selector: '#main-content > div > div:nth-child(2) > div:nth-child(27) > p',
      runner: 'axe',
      runnerExtras: [Object]
    }
  ]
}