Adjust ratio for opacity #222
Conversation
✅ Deploy Preview for oddcontrast ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Co-authored-by: Miriam Suzanne <[email protected]>
@mirisuzanne Good idea. I added one, but is there a way to have a background color on a layer above an image? It looks like a color is only valid as the last value. I ended up using a linear-gradient to create a solid color, but there has to be a better way. |
|
@mirisuzanne or @stacyk I'm assigning to you, as I think there's potentially some style cleanup to prevent a layout jump when the warning message is shown, and also since the icon doesn't feel spaced correctly. 
|
* main: lint Bump the dev-minor group across 1 directory with 15 updates Bump jsdom from 25.0.1 to 26.0.0 in the dev-major group Bump the dev-minor group with 6 updates upgrade node and yarn Bump the dev-minor group with 6 updates Bump the dev-minor group with 7 updates Bump the dev-minor group with 12 updates
| if ($bg.alpha !== 1) | ||
| return 'Alpha is not considered when the background is not opaque.'; | ||
| if ($fg.alpha !== 1) | ||
| return 'This ratio is our best estimate with transparency.'; |
There was a problem hiding this comment.
"with transparency" seems a bit vague to me if users haven't read the full description. Maybe "given the specified foreground alpha value" or something?
| let displayRatio = $derived(Math.round((ratio + Number.EPSILON) * 100) / 100); | ||
| let pass = $derived(ratio >= RATIOS.AA.Normal); | ||
| let alphaWarning = $derived.by(() => { | ||
| if ($bg.alpha !== 1) | ||
| return 'Alpha is not considered when the background is not opaque.'; |
There was a problem hiding this comment.
Could we link these two notes directly to the fuller description (expanding if necessary)?
If not that, we could consider adding the fuller explanation in a tooltip/dialog here instead of in the expandable "issues" section.
Description
When foreground opacity is changed, the ratio is based on the premultiplied color.
If the background opacity is changed, the ratio is based on both colors without any opacity.
Related Issue(s)
#91
Steps to test/reproduce
https://deploy-preview-222--oddcontrast.netlify.app/
Todo