Skip to content

-webkit-text-stroke- vs "insufficient contrast" #3356

@hikeislife

Description

@hikeislife

Product: <<axe-core | axe Extension | axe Linter>>

Expectation: << Describe what you expect the product to do >>

I made "meme font" for h1 on my site, using -webkit-text-stroke-width: 2px and -webkit-text-stroke-color: black. Font has just slightly different color than the background, but it's still easy to read, cause there's a black border around each letter

Actual: << Describe what the product actually does >>

This is accessibility report from lighthouse, and they said to write to you. the -webkit-text-stroke-__ triggers "insufficient contrast ratio" for h1 tags, because there's very little difference in text and background color. h1 text looks like "meme font", so the text is visible, due to each letter having distinctive "border" color of which has sufficient contrast. basically, background and font are white, but text-stroke is 2px thick and black.

Now I don't know if the "meme" font is considered hard to read, seeing how it has "double lines", but the "insufficient contrast" warning, doesn't seem applicable, cause black text-stroke makes all the contrast it can make

Motivation: << Describe why you want the behavior to be changed >>

the -webkit-text-stroke- css features are new, so that explains why they are not considered, but it should be, cause these features make the "meme font" and that has to be reasonably popular feature. I mean, this font is made in such a way, cause it's easy to read, no matter the background, so lighthouse probably shouldn't recognize this as "low visibility" issue


axe-core version: X.Y.Z
axe-webdriver, extension or other integration version: X.Y.Z

Browser and Assistive Technology versions

For Tooling issues:
- Node version: XX  
- Platform:  

Metadata

Metadata

Assignees

Labels

color contrastColor contrast issuesfixBug fixesrulesIssue or false result from an axe-core rule

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions