From 5ff73e4653fa4c5ab669df2ad4cb38594205b03a Mon Sep 17 00:00:00 2001
From: Graham Barber <did:plc:57od6g2ic3e3b3kauctjmo3k>
Date: Sun, 17 May 2026 20:26:29 -0700
Subject: [PATCH] fix(a11y): lift muted color to clear WCAG AA on slide
 surfaces

The muted token at #6e6a86 hit only 3.1-3.3:1 on the base and surface
backgrounds where the colophon byline, marquee, slide-number marginalia,
and full-bleed figcaption all sit, well below the 4.5:1 floor for body
text. Lift it to #8884a0 (HSL 248/13/57) to clear 4.5:1 on both
backdrops, differentiating from subtle through reduced chroma rather
than reduced lightness so the typographic role stays intact.

Even after the lift, muted falls ~4.2:1 on the lighter overlay surface
at the 0.7rem chrome-label scale. Reroute the presenter chrome labels
(.stage-label / .next-label / .notes-label) to subtle, which clears
4.7:1 on overlay, and document the reasoning inline.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 DESIGN.md                                 | 4 ++--
 packages/theme/tokens/colors.json         | 4 ++--
 packages/wc/components/presentation/wc.ts | 5 ++++-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/DESIGN.md b/DESIGN.md
index 8965532..08a81b0 100644
--- a/DESIGN.md
+++ b/DESIGN.md
@@ -5,7 +5,7 @@ colors:
   base: "#191724"
   surface: "#1f1d2e"
   overlay: "#26233a"
-  muted: "#6e6a86"
+  muted: "#8884a0"
   subtle: "#908caa"
   text: "#e0def4"
   danger: "#eb6f92"
@@ -130,7 +130,7 @@ A Rose Pine (Main) palette, tinted purple-blue, used in a Restrained strategy. S
 - **Base** (`#191724`): the deepest surface. Page background only. Never used as a fill on inset elements.
 - **Surface** (`#1f1d2e`): the slide canvas itself — every slide rests on this layer, one step up from base.
 - **Overlay** (`#26233a`): toolbars, popovers, anything that sits above the slide. One step up from surface.
-- **Muted** (`#6e6a86`): captions, footnotes, secondary metadata. Quiet text.
+- **Muted** (`#8884a0`): captions, footnotes, secondary metadata. Quieter than Subtle through reduced chroma rather than reduced lightness, so it still clears WCAG AA at body sizes (≥4.5:1 on Base and Surface). The earlier Rose Pine canonical `#6e6a86` was too dark to carry text reliably.
 - **Subtle** (`#908caa`): body copy default. The reading color.
 - **Text** (`#e0def4`): headings and emphasized text. The reading color's bright sibling.
 - **Highlight Low / Med / High** (`#21202e` / `#403d52` / `#524f67`): three tinted dividers and accent surfaces. Used for borders, rules, code-block backgrounds, table cell strokes. Replaces the entire concept of `border-color: gray`.
diff --git a/packages/theme/tokens/colors.json b/packages/theme/tokens/colors.json
index d1c0b73..c90d577 100644
--- a/packages/theme/tokens/colors.json
+++ b/packages/theme/tokens/colors.json
@@ -27,8 +27,8 @@
     "$type": "color",
     "$value": {
       "colorSpace": "hsl",
-      "components": [249, 12, 47],
-      "hex": "#6e6a86"
+      "components": [248, 13, 57],
+      "hex": "#8884a0"
     }
   },
   "subtle": {
diff --git a/packages/wc/components/presentation/wc.ts b/packages/wc/components/presentation/wc.ts
index bcd1768..9a2dd9b 100644
--- a/packages/wc/components/presentation/wc.ts
+++ b/packages/wc/components/presentation/wc.ts
@@ -358,7 +358,10 @@ export class PresentationWC extends LitElement {
       font-variation-settings: "MONO" 1;
       font-size: 0.7rem;
       letter-spacing: ${dimension("tracking.wide")};
-      color: ${color("muted")};
+      /* subtle (#908caa), not muted: these labels sit on the overlay
+         surface at 0.7rem and need to clear WCAG AA. Muted hits ~4.2:1
+         on overlay even after the AA lift; subtle hits ~4.7:1. */
+      color: ${color("subtle")};
       text-transform: uppercase;
     }
 
-- 
2.51.2