dequelabs / dequelabs/axe-core

Element's Background Color Contrast Marked as Incomplete Instead of Violation (Cannot Determine Why)

Open
#4,166 5 comments 0 reactions 0 assignees View on GitHub
color contrast fix
Dominant language
JavaScript
Stars
7.5k
Forks
933
Avg merge
2d 23h
Merged PRs (30d)
17

Description

### Product

axe-core

### Product Version

4.8.1

### Latest Version

- [X] I have tested the issue with the latest version of the product

### Issue Description

#### Expectation
Expected to run an e2e test with Playwright using AxeBuilder (`@axe-core/playwright`) and get a color-contrast issue marked as a violation.

#### Actual
Ran an e2e test with Playwright using AxeBuilder and color-contrast issue is marked as incomplete.

```js
results.violations === [];

results.incomplete === [
{
id: 'color-contrast',
impact: 'serious',
tags: [
'cat.color',
'wcag2aa',
'wcag143',
'TTv5',
'TT13.c',
'EN-301-549',
'EN-9.1.4.3',
'ACT',
],
description:
'Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds',
help: 'Elements must meet minimum color contrast ratio thresholds',
helpUrl:
'https://dequeuniversity.com/rules/axe/4.8/color-contrast?application=playwright',
nodes: [
{
any: [
{
id: 'color-contrast',
data: {
contrastRatio: 0,
fontSize: '10.5pt (14px)',
fontWeight: 'normal',
messageKey: 'bgOverlap',
expectedContrastRatio: '4.5:1',
},
relatedNodes: [],
impact: 'serious',
message:
"Element's background color could not be determined because it is overlapped by another element",
},
],
all: [],
none: [],
impact: 'serious',
html: '

Many or all companies we feature compensate us. Compensation and editorial
research influence how products appear on a page.
',
target: [ '.disclaimer > div' ],
failureSummary:
'Fix any of the following:\n' +
" Element's background color could not be determined because it is overlapped by another element",
},
],
},
];
```

#### How to Reproduce
Run the following test using Playwright with `@axe-core/playwright`:

```js
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test( 'test disclaimer has correct color contrast', async ( { page } ) => {
await page.goto( 'https://lendedu.com/blog/private-student-loans/' );

await page.locator( '.disclaimer' ).waitFor();

const results = await new AxeBuilder( { page } )
.include( '.disclaimer' )
.analyze();

expect( results.violations ).toEqual( [] );
} );
```
#### Additional context
Initially, I worked on this locally and made the local `div.disclaimer` a contrast violation. However, the results still mark it as incomplete. I am not able to determine why this is marked as incomplete, as there is no overlapping element (as described in the `incomplete` object).

In addition, I tried targeting the `div` directly (i.e. `.include( '.disclaimer > div' )`), and also tried removing the child`div` and `br` from `div.disclaimer`, but all result in the same `incomplete` notice.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.