Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

False color-contrast violations on elements with the clip or opacity styles #1987

Closed
benbcai opened this issue Jan 16, 2020 · 6 comments
Closed

False color-contrast violations on elements with the clip or opacity styles #1987

benbcai opened this issue Jan 16, 2020 · 6 comments
Assignees
@straker
Labels
color contrast Color contrast issues fix Bug fixes rules Issue or false result from an axe-core rule
Milestone
Axe-core 3.5

Comments

@benbcai
Copy link
Contributor

benbcai commented Jan 16, 2020 •
edited

Summary

#1943 appears to have introduced a false color-contrast violation under either of the following conditions:

Scenario 1:

  1. ElementA has a dark text color with a light background-color.
  2. ElementB has a light text color with a dark background-color.

ElementB is displayed on top of ElementA but ElementB is completely clipped (clip: rect(1px, 1px, 1px, 1px);) so that it is not visible on the page. All that is visible is ElementA.

To see the test page:

  1. Go to this test page.
  2. Search for "Skip to Content" in the DOM. Toggle the clip style to show/hide ElementB.

color-contrast1

Axe detects the following color-contrast violation even when ElementB is completely clipped/invisible. It appears that axe uses the text color of elementA with the background-color of elementB to determine the color-contrast (both are dark colors).

{
"description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds",
"help": "Elements must have sufficient color contrast",
"helpUrl": "https://dequeuniversity.com/rules/axe/3.4/color-contrast?application=axeAPI",
"id": "color-contrast",
"impact": "serious",
"nodes": [
{
"all": [],
"any": [
{
"data": {
"bgColor": "#0079be",
"contrastRatio": 3.53,
"expectedContrastRatio": "4.5:1",
"fgColor": "#1c1f21",
"fontSize": "10.5pt (14px)",
"fontWeight": "normal"
},
"id": "color-contrast",
"impact": "serious",
"message": "Element has insufficient color contrast of 3.53 (foreground color: #1c1f21, background color: #0079be, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
"options": {
"ignoreLength": false,
"ignoreUnicode": true,
"noScroll": false
},
"relatedNodes": [
{
"html": "<button type="button" class="ApplicationHeaderLayout-module__skip-content___1vGmQ">Skip to Content",
"target": [
"button"
]
}
]
}
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 3.53 (foreground color: #1c1f21, background color: #0079be, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
"html": "<div id="test-logo">Logo ",
"impact": "serious",
"none": [],
"target": [
"#test-logo"
]
}
],
"tags": [
"cat.color",
"wcag2aa",
"wcag143"
]
}

Scenario 2:

Element has a background-color of #ffffff (white) and a text color of #1c1f21 (black) with an opacity of 0.2. These style combined makes the text color appear light gray with a white background.

Go here to see the actual page

With the changes on #1943 axe now detects the following color-contrast violation. It appears that it now applies the opacity when determine the color contrast.

{
"description": "Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds",
"help": "Elements must have sufficient color contrast",
"helpUrl": "https://dequeuniversity.com/rules/axe/3.4/color-contrast?application=axeAPI",
"id": "color-contrast",
"impact": "serious",
"nodes": [
{
"all": [],
"any": [
{
"data": {
"bgColor": "#ffffff",
"contrastRatio": 1.51,
"expectedContrastRatio": "4.5:1",
"fgColor": "#d2d2d3",
"fontSize": "10.5pt (14px)",
"fontWeight": "normal"
},
"id": "color-contrast",
"impact": "serious",
"message": "Element has insufficient color contrast of 1.51 (foreground color: #d2d2d3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
"options": {
"ignoreLength": false,
"ignoreUnicode": true,
"noScroll": false
},
"relatedNodes": [
{
"html": "<html lang="en" dir="ltr">",
"target": [
"html"
]
}
]
}
],
"failureSummary": "Fix any of the following:\n Element has insufficient color contrast of 1.51 (foreground color: #d2d2d3, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1",
"html": "<div data-terra-clinical-item-display-text="true" class="ItemDisplay-module__text___c-QUG">test text",
"impact": "serious",
"none": [],
"target": [
"#test-display-text > .ItemDisplay-module__text___c-QUG[data-terra-clinical-item-display-text="true"]"
]
}

cc/ @straker


axe-core version: develop branch with latest commit; https://unpkg.com/axe-core@3.4.1-canary.4c8425e/axe.js

Browser and Assistive Technology versions

For Tooling issues:
- Node version: v10.17.0
- Platform:  Mac
@straker
Copy link
Contributor

straker commented Jan 17, 2020

Thanks for finding this, I'll try to get it fixed before our 3.5 release coming up.

@straker straker added color contrast Color contrast issues fix Bug fixes rules Issue or false result from an axe-core rule labels Jan 17, 2020
@straker
Copy link
Contributor

straker commented Jan 20, 2020

So scenario 2 is a true violation as the text does not pass the color-contrast ratio. Opacity should have been applied before, and testing axe@3.4.1 shows that it still reports as a violation.

@straker straker mentioned this issue Jan 20, 2020
Merged
2 tasks
@straker straker self-assigned this Jan 20, 2020
@straker straker added this to the Axe-core 3.5 milestone Jan 20, 2020
@benbcai
Copy link
Contributor Author

benbcai commented Jan 20, 2020

Thanks for the confirmation on scenario #2. We add this opacity to make the elements appear as "disabled". We will ignore the color-contrast rule for our "disabled" elements.

@straker
Copy link
Contributor

straker commented Jan 20, 2020

That makes sense. Axe can only detect "disabled" elements for form elements that use the disabled attribute, so ya you'll just have to ignore it.

@jeankaplansky
Copy link
Contributor

added to release notes 2/04/2019

@padmavemulapati
Copy link

For Scenario 1: tested for the specified page - No voilations found on clip on/off with the specified opacity and color-contrast.
image
image
and for Scenario 2: its gving as expected, with the test file specifications '

Good contrast

`

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@straker straker

Labels
color contrast Color contrast issues fix Bug fixes rules Issue or false result from an axe-core rule
Projects
None yet
Milestone
Axe-core 3.5
Development

No branches or pull requests
4 participants
@straker @jeankaplansky @benbcai @padmavemulapati