Take into account foreground alpha for contrast

src/lib/components/colors/Header.svelte

@@ -9,12 +9,16 @@
   export let type: 'bg' | 'fg';
   export let color: Writable<PlainColorObject>;
   export let format: ColorFormatId;
+  export let premultipliedFg: PlainColorObject | null;
 
   $: targetSpace = getSpaceFromFormatId(format);
   $: display = serialize($color, { inGamut: false, format });
   $: displayType = type === 'bg' ? 'Background' : 'Foreground';
   $: editing = false;
   $: inputValue = '';
+  $: displayPremultipliedFg = premultipliedFg
+    ? serialize(premultipliedFg, { inGamut: false, format })
+    : '';
   let hasError = false;
 
   // When not editing, sync input value with color (e.g. when sliders change)
@@ -89,6 +93,15 @@
   {#if hasError}
     <div data-color-info="warning">Could not parse input as a valid color.</div>
   {/if}
+  {#if premultipliedFg}
+    <div
+      data-color-info="premultiplied"
+      style="--premultipliedFg:{serialize(premultipliedFg)}"
+    >
+      {displayPremultipliedFg}
+      <span class="premultipliedFg"></span>
+    </div>
+  {/if}
 </div>
 
 <style lang="scss">
@@ -153,6 +166,14 @@
     }
   }
 
+  .premultipliedFg {
+    background-color: var(--premultipliedFg);
+    width: 10pt;
+    height: 10pt;
+    border: 1pt solid black;
+    display: inline-block;
+  }
+
   [data-input='color'] {
     border-width: 0 0 var(--border-width) 0;
     grid-area: input;

src/lib/components/colors/index.svelte

@@ -3,18 +3,23 @@
   import Header from '$lib/components/colors/Header.svelte';
   import Sliders from '$lib/components/colors/Sliders.svelte';
   import SupportWarning from '$lib/components/colors/SupportWarning.svelte';
-  import { bg, fg, format } from '$lib/stores';
+  import { bg, fg, format, premultipliedFg } from '$lib/stores';
 </script>
 
 <h2 class="sr-only">Check the contrast ratio between two colors</h2>
 
 <SupportWarning format={$format} />
 
 <form data-form="contrast-checker" data-layout="color-form">
-  <Header type="bg" color={bg} format={$format} />
+  <Header type="bg" color={bg} format={$format} premultipliedFg={null} />
   <Sliders type="bg" color={bg} format={$format} />
 
-  <Header type="fg" color={fg} format={$format} />
+  <Header
+    type="fg"
+    color={fg}
+    format={$format}
+    premultipliedFg={$premultipliedFg}
+  />
   <Sliders type="fg" color={fg} format={$format} />
 </form>
 

src/lib/components/ratio/index.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
-  import { contrast } from 'colorjs.io/fn';
+  import { clone, contrast, serialize } from 'colorjs.io/fn';
 
   import Result from '$lib/components/ratio/Result.svelte';
   import ExternalLink from '$lib/components/util/ExternalLink.svelte';
   import { RATIOS } from '$lib/constants';
-  import { bg, fg } from '$lib/stores';
+  import { bg, fg, premultipliedFg } from '$lib/stores';
 
-  $: ratio = contrast($bg, $fg, 'WCAG21');
+  let ratio: number;
+
+  $: {
+    const bgNoAlpha = clone($bg);
+    bgNoAlpha.alpha = 1;
+
+    ratio = contrast(bgNoAlpha, $premultipliedFg || $fg, 'WCAG21');
+  }
   $: displayRatio = Math.round((ratio + Number.EPSILON) * 100) / 100;
   $: pass = ratio >= RATIOS.AA.Large;
 </script>
@@ -29,6 +36,17 @@
     </p>
   </div>
 
+  {#if $premultipliedFg}
+    Because WCAG 2 doesn't account for alpha, this is approximated by
+    premultiplying the foreground color in the sRGB space.
+    <div class="compare-alpha">
+      <div style="--alpha-color:{serialize($fg)}">With alpha</div>
+      <div style="--alpha-color:{serialize($premultipliedFg)}">
+        Alpha premultipled
+      </div>
+    </div>
+  {/if}
+
   <div class="result-status">
     <Result level="AA" type="Normal" {ratio} />
     <Result level="AAA" type="Normal" {ratio} />
@@ -38,7 +56,6 @@
 
   <div class="contrast-defined">
     <h4 class="label">AA Contrast Ratio</h4>
-
     <dl>
       <dt><strong>{RATIOS.AA.Normal}</strong> : 1</dt>
       <dd>Normal Text</dd>
@@ -157,4 +174,14 @@
       display: none;
     }
   }
+  .compare-alpha {
+    display: flex;
+    color: black;
+    > div {
+      background-color: var(--alpha-color);
+      height: 4em;
+      border: 1pt solid white;
+      flex: auto;
+    }
+  }
 </style>

src/lib/stores.ts

@@ -10,12 +10,14 @@ import {
   sRGB,
 } from 'colorjs.io/fn';
 import type { PlainColorObject } from 'colorjs.io/types/src/color';
-import { writable } from 'svelte/store';
+import { derived, writable } from 'svelte/store';
 
 // eslint-disable-next-line import/no-unresolved
 import { browser, dev } from '$app/environment';
 import type { ColorFormatId } from '$lib/constants';
 
+import { premultiplyFG } from './utils';
+
 // Register supported color spaces
 ColorSpace.register(HSL);
 ColorSpace.register(Lab);
@@ -51,6 +53,7 @@ const INITIAL_FG = {
 export const format = writable<ColorFormatId>(INITIAL_VALUES.format);
 export const bg = writable<PlainColorObject>(INITIAL_BG);
 export const fg = writable<PlainColorObject>(INITIAL_FG);
+export const premultipliedFg = derived([fg, bg, format], premultiplyFG);
 
 export const reset = () => {
   bg.set(INITIAL_BG);

src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { clone, display, serialize, set, steps, to } from 'colorjs.io/fn';
+import { clone, display, mix, serialize, set, steps, to } from 'colorjs.io/fn';
 import type { PlainColorObject } from 'colorjs.io/types/src/color';
 
 import type { ColorFormatId } from '$lib/constants';
@@ -88,3 +88,22 @@ export const storeValuesToHash = (
   const fgParam = encodeColor(fg, format);
   return encodeURIComponent(`${format}__${bgParam}__${fgParam}`);
 };
+
+export const premultiplyFG = ([fg, bg, format]: [
+  fg: PlainColorObject,
+  bg: PlainColorObject,
+  format: ColorFormatId,
+]) => {
+  if (fg.alpha === 1) return;
+  const bgNoAlpha = clone(bg);
+  bgNoAlpha.alpha = 1;
+  const fgNoAlpha = clone(fg);
+  fgNoAlpha.alpha = 1;
+
+  return mix(fgNoAlpha, bgNoAlpha, 1 - fg.alpha, {
+    // We always mix in srgb, as we are approximating the color as it will be
+    // displayed on a monitor.
+    space: 'srgb',
+    outputSpace: getSpaceFromFormatId(format),
+  });
+};

test/js/lib/components/colors/Header.spec.ts

@@ -11,6 +11,7 @@ describe('Header', () => {
     const { getByLabelText } = render(Header, {
       type: 'bg',
       color,
+      premultipliedFg: HSL_WHITE,
       format: 'hsl',
     });
     const input = getByLabelText('Background Color');
@@ -31,6 +32,7 @@ describe('Header', () => {
     const { getByText, getByLabelText } = render(Header, {
       type: 'fg',
       color,
+      premultipliedFg: HSL_WHITE,
       format: 'hsl',
     });
     const input = getByLabelText('Foreground Color');
@@ -55,6 +57,7 @@ describe('Header', () => {
       const { getByText, getByLabelText } = render(Header, {
         type: 'fg',
         color,
+        premultipliedFg: HSL_WHITE,
         format: 'hsl',
       });
       const input = getByLabelText('Foreground Color');
@@ -78,6 +81,7 @@ describe('Header', () => {
       const { getByLabelText } = render(Header, {
         type: 'fg',
         color,
+        premultipliedFg: HSL_WHITE,
         format: 'hsl',
       });
       const input = getByLabelText('Foreground Color');