dequelabs / dequelabs/axe-core

Color-contrast rule does not correctly report on text shadow colors

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

Description

When a text has a text-shadow, axe-core will either report the contrast between the shadow and the text color, or the shadow and the background color. The resulting message should make it clear that this is the case. This may involve a few changes:

1. Axe-core needs to report the `shadowColor` property as part of its `data`, if there is a `shadowColor` worth reporting.
2. The `failed` message needs to be split up. We need to report which of the three contrast measurements axe-core used in that messages. We'd have the following message keys:
- `fgOnBgColor": "Element has insufficient color contrast of ${data.contrastRatio} (foreground color: ${data.fgColor}, background color: ${data.bgColor}, font size: ${data.fontSize}, font weight: ${data.fontWeight}). Expected contrast ratio of ${data.expectedContrastRatio}",`
- `fgOnShadowColor": "Element has insufficient color contrast of ${data.contrastRatio} (foreground color: ${data.fgColor}, text-shadow color: ${data.shadowColor}, font size: ${data.fontSize}, font weight: ${data.fontWeight}). Expected contrast ratio of ${data.expectedContrastRatio}",`
- `shadowOnBgColor": "Element has insufficient color contrast of ${data.contrastRatio} (text-shadow color: ${data.shadowColor}, background color: ${data.bgColor}, font size: ${data.fontSize}, font weight: ${data.fontWeight}). Expected contrast ratio of ${data.expectedContrastRatio}",`

Reporting the issue like this would make it clear why in some cases, even if the fg / bg color is sufficient, the rule can still fail.

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.