diff --git a/src/lib/components/ratio/ColorIssues.svelte b/src/lib/components/ratio/ColorIssues.svelte
index f83f1e32..c81906ad 100644
--- a/src/lib/components/ratio/ColorIssues.svelte
+++ b/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>
 
diff --git a/src/lib/components/ratio/index.svelte b/src/lib/components/ratio/index.svelte
index 7275d7ec..afe3dfac 100644
--- a/src/lib/components/ratio/index.svelte
+++ b/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,33 @@
   }
 
   .contrast-info {
+    column-gap: var(--shim);
     display: grid;
     grid-area: contrastinfo;
+    // fixed row height to prevent layout shift when warning appears
     grid-template:
-      'heading' min-content
-      'number' min-content / 100%;
+      'heading heading' min-content
+      'number warning' var(--ratio-warning-height)
+      / 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
+      // fixed row height to prevent layout shift when warning appears
       grid-template:
-        'heading number' min-content
-        'intro   intro' 1fr / auto var(--ratio-width);
+        'heading number' min-content 'warning warning' 3rem
+        'intro intro' auto/auto minmax(var(--ratio-width), 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' var(--ratio-warning-height) / var(--ratio-width) auto;
     }
   }
 
@@ -125,7 +156,7 @@
 
   .result-intro {
     grid-area: intro;
-    margin-bottom: var(--gutter);
+    margin-block: var(--gutter);
 
     @include config.below('sm-page-break') {
       display: none;
@@ -138,7 +169,7 @@
   }
 
   .result-ratio {
-    align-items: start;
+    align-items: center;
     display: inline-flex;
     grid-area: number;
     line-height: 0.7; // weird number alignment
@@ -147,6 +178,21 @@
       justify-content: flex-end;
     }
   }
+  .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));
diff --git a/src/sass/config/scale/_ui.scss b/src/sass/config/scale/_ui.scss
index bc6de04c..4bbd97cd 100644
--- a/src/sass/config/scale/_ui.scss
+++ b/src/sass/config/scale/_ui.scss
@@ -13,6 +13,7 @@ $icon-size-default: 1.125em;
 $icon-small: 0.65em;
 $icon-medium: 1.5em;
 $ratio-width: 10rem;
+$ratio-warning-height: 6rem;
 $range-thumb-size: 1.35rem;
 $range-input: 0.85rem;
 $triangle-width: var(--shim);
diff --git a/src/sass/initial/_type.scss b/src/sass/initial/_type.scss
index baab320a..5348a591 100644
--- a/src/sass/initial/_type.scss
+++ b/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 > & {