dequelabs / dequelabs/axe-core

color-contrast can return needs review when text is multiline

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

Description

When a text node spans multiple lines, but starts and stops at different parts along the X axis, this can result in color contrast returning `incomplete` for the node. The reason for this is that the color contrast check takes the text rects of the node and gets the [background stack for each one](https://github.com/dequelabs/axe-core/blob/develop/lib/commons/color/get-background-stack.js) and compares each stack to each other stack. If the stacks don't contain the same elements then we incomplete with `elmPartiallyObscuring`.

In the following example, the `span` wraps to a new line and each stack overlaps a different background `column`. Normally this would return `elmPartiallyObscuring`, however the text has a fully opaque element in between the text and the `column` elements. We could improve the color contrast check if we removed all the elements below any fully opaque element as they can't contribute to the background color before we compared the stacks against each other.

```html

main {
position: relative;
display: flex;
}
.column {
width: 390px;
height: 900px;
border: 1px solid;
}
.footer {
position: absolute;
width: 780px;
background: black;
color: white;
}



```

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.