Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
False color-contrast violations on elements with the clip or opacity styles
See original GitHub issueSummary
#1943 appears to have introduced a false color-contrast violation under either of the following conditions:
Scenario 1:
- ElementA has a dark text color with a light background-color.
- 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:
- Go to this test page.
- Search for “Skip to Content” in the DOM. Toggle the
clipstyle to show/hide ElementB.
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</button>”, “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 </div>”, “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</div>”, “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
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (5 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Thanks for finding this, I’ll try to get it fixed before our 3.5 release coming up.
For Scenario 1: tested for the specified page - No voilations found on clip on/off with the specified opacity and color-contrast.
and for Scenario 2: its gving as expected, with the test file specifications '<div style="background-color: #1c1f21; color: #ffffff; opacity: 0.2 ">
Good contrast
</div>`