axe-core
axe-core copied to clipboard
-webkit-text-stroke- vs "insufficient contrast"
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:
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?
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>
