From 2fbf5f00125612eb426ea0d22bfce81d54ccdff3 Mon Sep 17 00:00:00 2001
From: James Stuckey Weber <james@oddbird.net>
Date: Tue, 10 Dec 2024 13:56:25 -0500
Subject: [PATCH] Revert "Account for opacity"

This reverts commit d8b5bba461c257ae701f495d9c62314b6be3e1f3.
---
 src/lib/components/ratio/ColorIssues.svelte | 18 -----------------
 src/lib/components/ratio/index.svelte       | 22 ++-------------------
 2 files changed, 2 insertions(+), 38 deletions(-)

diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index 2fd3f43..f83f1e3 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/src/lib/components/ratio/ColorIssues.svelte
@@ -54,24 +54,6 @@
         adjust the color to be in gamut.
       </p>
     </dd>
-    <dt>Background Color Alpha Values</dt>
-    <dd>
-      <p>
-        WCAG 2 contrast does not consider alpha values. Because we don't know
-        what is behind your background color, we can't estimate the contrast. If
-        the background color is not opaque, the contrast ratio is computed
-        without background or foreground opacity.
-      </p>
-    </dd>
-    <dt>Foreground Color Alpha Values</dt>
-    <dd>
-      <p>
-        WCAG 2 contrast does not consider alpha values, but we can approximate a
-        ratio by premultiplying a semi-transparent foreground color in the sRGB
-        space. In practice, the displayed foreground color may vary, depending
-        on the display and browser.
-      </p>
-    </dd>
   </dl>
 </details>
 
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index d6385cd..7275d7e 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/src/lib/components/ratio/index.svelte
@@ -1,30 +1,15 @@
 <script lang="ts">
-  import { contrast, mix } from 'colorjs.io/fn';
+  import { contrast } from 'colorjs.io/fn';
 
   import ColorIssues from '$lib/components/ratio/ColorIssues.svelte';
   import Result from '$lib/components/ratio/Result.svelte';
   import ExternalLink from '$lib/components/util/ExternalLink.svelte';
-  import Icon from '$lib/components/util/Icon.svelte';
   import { RATIOS } from '$lib/constants';
   import { bg, fg } from '$lib/stores';
 
-  let fgPremultiplied = $derived.by(() => {
-    if ($fg.alpha === 1 || $bg.alpha !== 1) return $fg;
-
-    return mix($bg, $fg, $fg.alpha, {
-      space: 'srgb',
-      premultiplied: false,
-    });
-  });
-  let ratio = $derived(contrast($bg, fgPremultiplied, 'WCAG21'));
+  let ratio = $derived(contrast($bg, $fg, 'WCAG21'));
   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.';
-    if ($fg.alpha !== 1) return 'This ratio is our best estimate.';
-    return null;
-  });
 </script>
 
 <aside data-layout="results">
@@ -35,9 +20,6 @@
       <span class="sr-only">The contrast ratio is</span>
       <span class="result-ratio-number">{displayRatio}:1</span>
     </h3>
-    {#if alphaWarning}
-      <p><Icon name="warning" />{alphaWarning}</p>
-    {/if}
 
     <p class="result-intro">
       In WCAG 2, contrast is a measure of the difference in perceived brightness