Adjust ratio for opacity #222

jamesnw · 2024-12-10T19:08:38Z

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

Design pass on message in results section

netlify · 2024-12-10T19:09:00Z

✅ Deploy Preview for oddcontrast ready!

Name	Link
🔨 Latest commit	`15b5251`
🔍 Latest deploy log	https://app.netlify.com/sites/oddcontrast/deploys/67aa517f287d0f0008e9acc0
😎 Deploy Preview	https://deploy-preview-222--oddcontrast.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

mirisuzanne

looks good. Might be nice to have a checkerboard under the sample area, for when background color is not opaque?

src/lib/components/ratio/index.svelte

Co-authored-by: Miriam Suzanne <miriam@oddbird.net>

jamesnw · 2024-12-11T21:50:45Z

looks good. Might be nice to have a checkerboard under the sample area, for when background color is not opaque?

@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.

jamesnw · 2024-12-11T21:53:14Z

@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

src/lib/components/ratio/index.svelte

jgerigmeyer · 2025-01-16T19:15:29Z

src/lib/components/ratio/index.svelte

  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.';


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.

I think linking will be much easier once we're done with #223. I'm fine with moving it to a tooltip/dialog, but note we'd need to develop that pattern. I'll defer to @SondraE on what we should do.

Ok, would it make more sense for me to focus on cleaning up #223 in the meantime @jamesnw? That PR just needs style cleanup, right?

Correct- that would be great!

dvdherron · 2025-01-24T16:11:00Z

@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.

I think I've fixed the layout jumping issues (in d4dccb8) and cleaned up the warning message in (bf7d3eb)

@stacyk @SondraE Thoughts on how this is looking so far? Look at the warning message at the different break points and with passing and failing ratio.

SondraE

@dvdherron I think this is going in a good direction!
There are a few breakpoints where the message seemed disconnected from the ratio and not aligned with the other content.

dvdherron · 2025-01-27T14:47:49Z

@SondraE I adjusted the spacing in some of those middle widths so that the warning isn't so far from the ratio.

passing ratio with warning:

failing with warning:

with no warning:

jamesnw · 2025-02-04T21:59:43Z

With the color issues move merged in, I added links from the warnings to the color section.

@dvdherron The warnings will need to be styled. I assume the DOM will need to be changed somehow- feel free to do it, or let me know if you want me to.

Because the issues are at the bottom of the page, the header won't be scrolled to the top of the page. I added a :has(:target) selector with a fairly heavy-handed highlight, which I think could be scaled back significantly.

* main: clean up animation cleanup add outline to swap button animate swap button change sr-only text for switch button reduce space around switch button lint initial style cleanup for color swap button Better handling of dragging Start styling switch button Add button and drag to swap colors

dvdherron · 2025-02-06T16:31:13Z

With the color issues move merged in, I added links from the warnings to the color section.

@dvdherron The warnings will need to be styled. I assume the DOM will need to be changed somehow- feel free to do it, or let me know if you want me to.

Fixed the warnings in cf92e08

Because the issues are at the bottom of the page, the header won't be scrolled to the top of the page. I added a :has(:target) selector with a fairly heavy-handed highlight, which I think could be scaled back significantly.

Changed this to where just the heading is highlighted. Too subtle?

dvdherron · 2025-02-06T16:34:29Z

A gif of the layout bouncing as the ratio changes

Accidentally changed the size of the fixed width column for the ratio number. Fixed in 607ea55

dvdherron · 2025-02-06T16:45:02Z

@stacyk @SondraE @mirisuzanne I think this is ready for final review.

The biggest change was stacking the ratio number on top of the eventual warning on the narrowest screens. Oherwise it felt like the warning box grew really tall:

And now that the color issues are linked to at the bottom of the page, the heading of the respective list item is subtly highlighted after following the "learn more" link in the warning.

Is the color and the "diamond" too sublte?

SondraE

This is all looking really good to me. I really like the idea of highlighting the title of the section the user is taken to after clicking Learn More. I wonder if it would feel even more related to the warning if the text color was the same pink as the warning text color and the same icon was used.

dvdherron · 2025-02-07T11:15:49Z

el even more related to the warning if the text color was the same pink as the warning text color and the same icon was used.

@SondraE Fixed in e129e61

mirisuzanne

this looks great. Just left a few notes on the code.

mirisuzanne · 2025-02-07T17:08:28Z

src/lib/components/ratio/index.svelte

    display: inline-flex;
    grid-area: number;
+    justify-content: flex-start;


I wonder if we want to remove this, and let it stretch to fill the space?

removed in 1044fb1

mirisuzanne · 2025-02-07T17:10:56Z

src/lib/components/ratio/index.svelte

@@ -19,6 +41,15 @@
      <span class="sr-only">The contrast ratio is</span>


I know it's not new here, but I don't think this is useful screen reader context. The heading directly before this says 'current ratio' already.

Agreed. Removed in 1044fb1. On the topic, I wonder if (in another story) we should edit the click-to-copy buttons to say what exactly they are copying?

Yeah, I don't know the best solution on those - but no harm oping an issue to explore it.

src/lib/components/ratio/index.svelte

src/sass/config/scale/_ui.scss

mirisuzanne

looks great!

src/lib/components/ratio/index.svelte

stacyk

Looks and works great!

Adjust ratio for opacity

9c239d7

This was referenced Dec 10, 2024

Take into account foreground alpha for contrast #120

Closed

Move color issues to main section #223

Merged

jamesnw requested a review from stacyk December 10, 2024 19:18

This was linked to issues Dec 10, 2024

Contrast ratios should account for alpha transparency #91

Closed

I want to know that WCAG contrast does not consider Alpha values for background colors. #106

Closed

jamesnw requested review from mirisuzanne and jgerigmeyer December 11, 2024 20:50

mirisuzanne approved these changes Dec 11, 2024

View reviewed changes

src/lib/components/ratio/index.svelte Outdated Show resolved Hide resolved

jamesnw and others added 2 commits December 11, 2024 16:37

Update src/lib/components/ratio/index.svelte

51feefe

Co-authored-by: Miriam Suzanne <miriam@oddbird.net>

Add checkerboard pattern to results bg

2aee05d

jamesnw assigned mirisuzanne and stacyk Dec 11, 2024

jgerigmeyer added 2 commits January 16, 2025 13:52

review

bdf6fc1

jgerigmeyer reviewed Jan 16, 2025

View reviewed changes

dvdherron added 2 commits January 23, 2025 15:45

adjust placement of alpha warnings

d4dccb8

add styles for warning message

bf7d3eb

dvdherron assigned SondraE and dvdherron and unassigned mirisuzanne Jan 24, 2025

dvdherron requested a review from SondraE January 24, 2025 16:11

SondraE approved these changes Jan 24, 2025

View reviewed changes

dvdherron added 2 commits January 27, 2025 15:27

cleanup warning spacing at medium widths

2df32d4

remove top margin for result-status

4e9be03

Add links from warnings to color issues

0576ac3

jgerigmeyer and others added 4 commits February 5, 2025 14:45

revert change to ratio number column

607ea55

tweak warning space

cf92e08

style warning link target

72a30d0

dvdherron requested review from stacyk, SondraE and mirisuzanne February 6, 2025 16:46

SondraE approved these changes Feb 6, 2025

View reviewed changes

dvdherron added 2 commits February 7, 2025 11:52

change warning target color and add icon to target headings

e129e61

adjust ratio grid

439f291

jgerigmeyer approved these changes Feb 7, 2025

View reviewed changes

mirisuzanne reviewed Feb 7, 2025

View reviewed changes

review edits

1044fb1

dvdherron requested a review from mirisuzanne February 10, 2025 13:24

mirisuzanne approved these changes Feb 10, 2025

View reviewed changes

src/lib/components/ratio/index.svelte Outdated Show resolved Hide resolved

remove unnecessary code

15b5251

dvdherron requested a review from mirisuzanne February 10, 2025 19:22

mirisuzanne approved these changes Feb 10, 2025

View reviewed changes

jgerigmeyer assigned stacyk and unassigned dvdherron Feb 10, 2025

dvdherron mentioned this pull request Feb 11, 2025

Should click-to-copy buttons announce what they are copying? #241

Open

stacyk approved these changes Feb 11, 2025

View reviewed changes

stacyk merged commit b58b5cd into main Feb 11, 2025
7 checks passed

stacyk deleted the alpha branch February 11, 2025 17:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adjust ratio for opacity #222

Adjust ratio for opacity #222

jamesnw commented Dec 10, 2024 •

edited by dvdherron

Loading

netlify bot commented Dec 10, 2024 •

edited

Loading

mirisuzanne left a comment

jamesnw commented Dec 11, 2024

jamesnw commented Dec 11, 2024

jgerigmeyer Jan 16, 2025

jamesnw Jan 27, 2025

dvdherron Jan 27, 2025

jamesnw Jan 27, 2025

dvdherron commented Jan 24, 2025

SondraE left a comment

dvdherron commented Jan 27, 2025

jamesnw commented Feb 4, 2025

dvdherron commented Feb 6, 2025

dvdherron commented Feb 6, 2025

dvdherron commented Feb 6, 2025

SondraE left a comment

dvdherron commented Feb 7, 2025

mirisuzanne left a comment

mirisuzanne Feb 7, 2025

dvdherron Feb 10, 2025

mirisuzanne Feb 7, 2025

dvdherron Feb 10, 2025 •

edited

Loading

mirisuzanne Feb 10, 2025

mirisuzanne left a comment

stacyk left a comment

		@@ -19,6 +41,15 @@
		<span class="sr-only">The contrast ratio is</span>

Adjust ratio for opacity #222

Adjust ratio for opacity #222

Conversation

jamesnw commented Dec 10, 2024 • edited by dvdherron Loading

Description

Related Issue(s)

Steps to test/reproduce

Todo

netlify bot commented Dec 10, 2024 • edited Loading

✅ Deploy Preview for oddcontrast ready!

mirisuzanne left a comment

Choose a reason for hiding this comment

jamesnw commented Dec 11, 2024

jamesnw commented Dec 11, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dvdherron commented Jan 24, 2025

SondraE left a comment

Choose a reason for hiding this comment

dvdherron commented Jan 27, 2025

jamesnw commented Feb 4, 2025

dvdherron commented Feb 6, 2025

dvdherron commented Feb 6, 2025

dvdherron commented Feb 6, 2025

SondraE left a comment

Choose a reason for hiding this comment

dvdherron commented Feb 7, 2025

mirisuzanne left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dvdherron Feb 10, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mirisuzanne left a comment

Choose a reason for hiding this comment

stacyk left a comment

Choose a reason for hiding this comment

jamesnw commented Dec 10, 2024 •

edited by dvdherron

Loading

netlify bot commented Dec 10, 2024 •

edited

Loading

dvdherron Feb 10, 2025 •

edited

Loading