dequelabs / dequelabs/axe-core

Add opacity information to color contrast remediation message

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

Description

When running color contrast, if opacity is applied to an ancestor element the final color can change. However, as a user it looks more like a bug when the colors do not match the element that gives the error.

For example, given the following HTML:

```html


Hello World

```

Gives the following message:

```
"Fix any of the following:
Element has insufficient color contrast of 4.41 (foreground color: #267cc3,
background color: #ffffff, font size: 12.0pt (16px), font weight: normal).
Expected contrast ratio of 4.5:1"
```

Since the foreground color does not match the color of the node, it is easy to perceive this as an error in the color contrast rule. However the color is the final color after opacity is applied, so it is in fact the correct true color of the element.

We should add opacity information to the remediation message to inform the user that the reason the colors are different is due to opacity of a parent.

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.