dequelabs / dequelabs/axe-core
color-contrast can return needs review when text is multiline
- 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
Assessment
This issue has not been assessed yet.