False positive: 'color-contrast' rule fails on intentionally invisible text

[kylemh]

Expectation: CSS-Hidden Screen Reader Only text or text with opacity intentionally set to zero with the express purpose of becoming visible on animation later should not trigger color contrast ratio violations.

Actual: Both above cases cause rule breaks

Motivation: Screen Reader Only text is my biggest motivation. Having been at multiple places where design gets final word on things, I want to provide queues and content to people hard-of-sight or devoid-of-sight. At these same places, I may be also dinged via automated tooling whose quota I may be mandated to meet.

axe-core version: 3.5.1

Lighthouse uses 3.5.1, that is.

---

After template

I saw this issue: #1456

Which seems like my React component's styling should behave the same (since width and height are at 1px)... but you will see many accessibility violations on this page: https://www.operationcode.org/code_schools

[straker]

The color contrast rule should filter out nodes that are hidden by CSS. However, looking at the page I see each card has multiple very light grey text nodes (which are usually proceeded by screen reader only text). These are the majority of failures from what I randomly selected, and they are correct failures as the text fails contrast.

[kylemh]

Awkward. I presumed it was referencing a different node. Sorry that I had you do an audit for me. I'll fix that problem.