Skip to content

Contrast False Positive with Pseudo Elements #212

@chavab1

Description

@chavab1

It took me a while to figure out why I was getting a contrast error but I finally figured it out.

I have a button hover effect where the background slides up leaving just the border. The button has a thin border around it, white text, and the background is applied to its ::after selector. On-hover the text changes from white to the dark gray, and the background slides up.

The contrast error that is reported seems to be from the white text in the button against the body's light gray background. So it looks like even though there's a dark gray background, it's not being seeing because it's being rendered by the ::after selector. I confirmed this myself by manually checking the contrast from the white text and light gray background. I got the exact same 1.08:1.

I looked around to see if anyone had experience something similar but I couldn't find anything.

Thanx

capture

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions