Adjust ratio for opacity

src/lib/components/ratio/ColorIssues.svelte

@@ -54,6 +54,24 @@
         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>
 

src/lib/components/ratio/index.svelte

@@ -1,15 +1,30 @@
 <script lang="ts">
-  import { contrast } from 'colorjs.io/fn';
+  import { contrast, mix } 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 ratio = $derived(contrast($bg, $fg, 'WCAG21'));
+  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 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 given the specified foreground alpha value.';
+    return null;
+  });
 </script>
 
 <aside data-layout="results">
@@ -20,6 +35,13 @@
       <span class="sr-only">The contrast ratio is</span>
       <span class="result-ratio-number">{displayRatio}:1</span>
     </h3>
+    {#if alphaWarning}
+      <div class="result-warning-info">
+        <p data-color-info="warning" class="result-warning">
+          <Icon name="warning" />{alphaWarning}
+        </p>
+      </div>
+    {/if}
 
     <p class="result-intro">
       In WCAG 2, contrast is a measure of the difference in perceived brightness
@@ -73,7 +95,9 @@
   @use 'config';
 
   [data-layout='results'] {
-    background-color: var(--bgcolor);
+    background: linear-gradient(90deg, var(--bgcolor), var(--bgcolor)),
+      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><rect fill="%23e8e8e8" width="30" height="30"/><rect x="30" y="30" width="30" height="30" fill="%23e8e8e8"/></svg>');
+    background-size: 30px 30px;
     color: var(--fgcolor);
     display: grid;
     gap: var(--result-layout-gap, var(--shim));
@@ -96,26 +120,31 @@
   }
 
   .contrast-info {
+    column-gap: var(--shim);
     display: grid;
     grid-area: contrastinfo;
     grid-template:
-      'heading' min-content
-      'number' min-content / 100%;
+      'heading heading' min-content
+      'number warning' min-content / auto 1fr;
+    margin-block-end: var(--contrast-info-block-end, var(--gutter));
+
+    @include config.between('sm-page-break', 'lg-page-break') {
+      --contrast-info-block-end: 0;
 
-    @include config.between('sm-column-break', 'lg-page-break') {
       gap: var(--shim) var(--gutter);
       // fixed width column to prevent layout shift as the ratio number changes
       grid-template:
-        'heading number' min-content
-        'intro   intro' 1fr / auto var(--ratio-width);
+        'heading heading' min-content
+        'number warning' min-content
+        'intro intro' auto / auto 1fr;
     }
 
     @include config.above('lg-page-break') {
       gap: var(--shim);
       grid-template:
-        'heading' auto
-        'intro' auto
-        'number' auto / 100%;
+        'heading heading' auto
+        'intro intro' auto
+        'number warning' min-content / 1fr auto;
     }
   }
 
@@ -125,7 +154,7 @@
 
   .result-intro {
     grid-area: intro;
-    margin-bottom: var(--gutter);
+    margin-block: var(--gutter);
 
     @include config.below('sm-page-break') {
       display: none;
@@ -138,7 +167,7 @@
   }
 
   .result-ratio {
-    align-items: start;
+    align-items: center;
     display: inline-flex;
     grid-area: number;
     line-height: 0.7; // weird number alignment
@@ -148,6 +177,23 @@
     }
   }
 
+  .result-warning-info {
+    align-items: center;
+    display: flex;
+    grid-area: warning;
+  }
+
+  .result-warning {
+    --warning-bg: var(--bg);
+    --warning-padding-block: var(--shim);
+    --warning-padding-inline: var(--shim);
+    --warning-size: var(--small);
+    border: var(--border-width) solid var(--border);
+    border-radius: var(--border-radius);
+    display: flex;
+    gap: var(--half-shim);
+  }
+
   .result-ratio-number {
     background-color: var(--status-result-bg, var(--bgcolor));
     border-radius: var(--border-radius);
@@ -161,6 +207,11 @@
     grid-area: status;
     grid-template-columns: 1fr 1fr;
     text-align: center;
+
+    @include config.between('sm-page-break', 'lg-page-break') {
+      grid-template-rows: min-content;
+      padding-block-start: var(--shim-plus);
+    }
   }
 
   .contrast-defined {

src/sass/initial/_type.scss

@@ -73,6 +73,7 @@ strong {
   font-size: var(--color-info-size, var(--warning-size));
   margin-bottom: var(--warning-margin-bottom);
   padding-block: var(--warning-padding-block);
+  padding-inline: var(--warning-padding-inline);
   text-align: var(--warning-align, left);
 
   main > & {