fix(color-contrast): check bg on fg contrast for thin text-shadows #3350
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
WilcoFiers
commented
Jan 13, 2022
There was a problem hiding this comment.
To see the results locally go to http://localhost:9876/test/integration/rules/color-contrast/text-shadows.html
The script on that page adds icons to what passes and what fails.
| contrastContributor = | ||
| bgContrast > fgContrast ? 'shadowOnBgColor' : 'fgOnShadowColor'; | ||
| // Compare shadow, bgColor, textColor. Check passes if any is sufficient | ||
| const fgBgContrast = getContrast(bgColor, fgColor); |
There was a problem hiding this comment.
This is the critical change here. Considering fgColor / bgColor contrast even if there's a thin shadow.
| @@ -17,7 +17,7 @@ | |||
| } | |||
| }, | |||
| "pseudoSizeThreshold": 0.25, | |||
| "shadowOutlineEmMax": 0.1 | |||
| "shadowOutlineEmMax": 0.2 | |||
There was a problem hiding this comment.
After asking a few people I discovered the current threshold was slightly too strict. Increasing this number means the slightly larger shadows will be allowed to serve as text outlines, giving more opportunities for it to pass the contrast ratio.
| @@ -303,220 +320,433 @@ | |||
| <section class="s1" id="b1"> | |||
| <div class="r0"><i id="sample1">Sample</i></div> | |||
| <div class="r1"> | |||
| <i>b1-r1-i1</i> <i>b1-r1-i2</i> <i>b1-r1-i3</i> <i>b1-r1-i4</i> | |||
| <i id="b1-r1-i1">b1-r1-i1</i> | |||
There was a problem hiding this comment.
I added IDs to make these easier to work with.
straker
approved these changes
Jan 13, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
The initial text-shadow implementation overlooked that the shadow color can have the luminance between that of the foreground and background. Now, if you have a dark text, light background and a thin shadow that sits in between those two colors, axe will grab the contrast of the foreground and background color.
Related to that, the shadowOutlineEmMax threshold is bumped to .2em. I've showed a few people the .15em example and most seemed okay with comparing background and foreground for a shadow of that width.
This change also addressed some "false positive" edge cases, making the rule in general slightly more permissive when it comes to text-shadow.
Closes issue: #3157