From 0ed2b45b95781a9e59c060047b18ba23c3b6e3ce Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Mon, 3 Mar 2025 12:07:45 -0500
Subject: [PATCH 1/2] Fix ratio not updating when sliders change

---
 src/lib/components/ratio/index.svelte |  4 ++--
 test/lib/components/Ratio.spec.ts     | 18 ++++++++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index 0ab875a7..be4c0228 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -8,13 +8,13 @@
   import { bg, fg } from '$lib/stores';
 
   let fgPremultiplied = $derived.by(() => {
-    if ($fg.alpha === 1 || $bg.alpha !== 1) return $fg;
+    if ($fg.alpha === 1 || $bg.alpha !== 1) return null;
     return mix($bg, $fg, $fg.alpha, {
       space: 'srgb',
       premultiplied: false,
     });
   });
-  let ratio = $derived(contrast($bg, fgPremultiplied, 'WCAG21'));
+  let ratio = $derived(contrast($bg, fgPremultiplied ?? $fg, 'WCAG21'));
   let displayRatio = $derived(Math.round((ratio + Number.EPSILON) * 100) / 100);
   let pass = $derived(ratio >= RATIOS.AA.Normal);
   let alphaWarning = $derived.by(() => {
diff --git a/test/lib/components/Ratio.spec.ts b/test/lib/components/Ratio.spec.ts
index fec0470e..58505c2f 100644
--- a/test/lib/components/Ratio.spec.ts
+++ b/test/lib/components/Ratio.spec.ts
@@ -1,7 +1,7 @@
-import { render } from '@testing-library/svelte';
+import { render, waitFor } from '@testing-library/svelte';
 
 import Ratio from '$lib/components/ratio/index.svelte';
-import { reset } from '$lib/stores';
+import { fg, reset } from '$lib/stores';
 
 describe('Ratio', () => {
   afterEach(() => {
@@ -15,4 +15,18 @@ describe('Ratio', () => {
     expect(queryAllByText('Pass')).not.toBeNull();
     expect(queryByText('Fail')).toBeNull();
   });
+
+  it('updates ratio when color changes', async () => {
+    const { getByText, queryByText, queryAllByText } = render(Ratio);
+    fg.update((val) => {
+      val.coords = [0.5, 0.5, 0.5];
+      return val;
+    });
+
+    await waitFor(() => {
+      expect(getByText('3.22:1')).toBeVisible();
+      expect(queryByText('Pass')).not.toBeNull();
+      expect(queryAllByText('Fail')).not.toBeNull();
+    });
+  });
 });

From 4337ce3c288d07a22ac55d59685ea0557863e1f9 Mon Sep 17 00:00:00 2001
From: Jonny Gerig Meyer <jonny@oddbird.net>
Date: Mon, 3 Mar 2025 12:32:47 -0500
Subject: [PATCH 2/2] review

---
 src/lib/components/ratio/index.svelte | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index be4c0228..c08703bb 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -7,14 +7,16 @@
   import { RATIOS } from '$lib/constants';
   import { bg, fg } from '$lib/stores';
 
-  let fgPremultiplied = $derived.by(() => {
-    if ($fg.alpha === 1 || $bg.alpha !== 1) return null;
-    return mix($bg, $fg, $fg.alpha, {
-      space: 'srgb',
-      premultiplied: false,
-    });
+  let ratio = $derived.by(() => {
+    let fgPremultiplied = $fg;
+    if ($fg.alpha !== 1 && $bg.alpha === 1) {
+      fgPremultiplied = mix($bg, $fg, $fg.alpha, {
+        space: 'srgb',
+        premultiplied: false,
+      });
+    }
+    return contrast($bg, fgPremultiplied, 'WCAG21');
   });
-  let ratio = $derived(contrast($bg, fgPremultiplied ?? $fg, 'WCAG21'));
   let displayRatio = $derived(Math.round((ratio + Number.EPSILON) * 100) / 100);
   let pass = $derived(ratio >= RATIOS.AA.Normal);
   let alphaWarning = $derived.by(() => {