axe-core icon indicating copy to clipboard operation
axe-core copied to clipboard

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

Open hikeislife opened this issue 3 years ago • 1 comments

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:  

hikeislife avatar Jan 19 '22 17:01 hikeislife

Thanks for the issue. You are correct that we don't support -webkit-text-stroke- for checking color contrast. However we do take into account text-shadow, which you could use as a stroke in the mean time.

As far as I know we don't have plans to support text-stroke, but we can leave this open to keep track of any changes to that progress.

Would you mind sharing an image of what the "meme font" looks like and maybe a code snippet of how to generate it so we can make sure to have a test example when addressing the issue?

straker avatar Jan 19 '22 17:01 straker

Validated with the latest code base of axe-core develop branch , for the code snippet, where in -webkit-text-stroke support implemented:

<p style="color: #ccc; -webkit-text-stroke: 0.03em #444" id="fail1">
    Text-stroke 0.03em
  </p>
  <p style="color: #ccc; -webkit-text-stroke: 0.02em #444" id="fail2">
    Text-stroke 0.02em
  </p>

Image

padmavemulapati avatar Dec 05 '22 14:12 padmavemulapati