Pin fg-secondary/dimmed alpha to WCAG AA against the active theme bg

Light Omarchy themes (Catppuccin Latte, Rose Pine Dawn) put fg
foreground around #4c4f69 — at the previous fixed alphas of 0.75 / 0.5
the alpha-blended secondary/dimmed labels landed at ~4.5:1 and ~2.5:1,
the latter failing even AA-Large. Compute the minimum alpha that hits
AA (4.5:1) for fg-secondary and AA-Large (3:1) for fg-dimmed via the
new wcagAlphaForContrast helper, falling back to the design alpha
when contrast budget allows so dark-theme dimming stays unchanged.

Author: bjarneo

frontend/src/App.svelte

@@ -78,7 +78,7 @@
     import KeymapDialog from '$lib/components/shared/KeymapDialog.svelte';
     import CommandPalette from '$lib/components/shared/CommandPalette.svelte';
     import {initKeyboardShortcuts, registerShortcut} from '$lib/utils/keyboard';
-    import {hexToRgb, isLightRgb} from '$lib/utils/color';
+    import {hexToRgb, isLightRgb, wcagAlphaForContrast} from '$lib/utils/color';
     import {buildCommands} from '$lib/commands/commands.svelte';
     import type {main} from '../wailsjs/go/models';
 
@@ -100,6 +100,12 @@
         ['--color-border', 0.1, 0.08],
         ['--color-border-focus', 0.2, 0.18],
     ];
+    // Design alpha for fg-secondary/dimmed; bumped at apply-time when needed
+    // to satisfy WCAG against the actual theme bg/fg pair.
+    const FG_SECONDARY_DESIGN_ALPHA = 0.75;
+    const FG_DIMMED_DESIGN_ALPHA = 0.5;
+    const WCAG_AA_RATIO = 4.5;
+    const WCAG_AA_LARGE_RATIO = 3;
 
     // Mirror editor state into Go (debounced) so `aether status` and other IPC
     // readers reflect live edits without waiting for an Apply. Long enough
@@ -311,17 +317,36 @@
                             '--color-fg-primary',
                             colors.foreground
                         );
-                        // Derive secondary/dimmed from foreground so labels
-                        // stay readable when the theme bg is light — the
-                        // default tokens are tuned for dark bg only.
+                        // Pick alpha that satisfies WCAG AA / AA-Large
+                        // against the actual theme bg, falling back to the
+                        // designed dim levels when contrast budget allows.
                         const fg = hexToRgb(colors.foreground);
+                        const bg = colors.background
+                            ? hexToRgb(colors.background)
+                            : null;
+                        const secondaryAlpha = bg
+                            ? wcagAlphaForContrast(
+                                  fg,
+                                  bg,
+                                  FG_SECONDARY_DESIGN_ALPHA,
+                                  WCAG_AA_RATIO
+                              )
+                            : FG_SECONDARY_DESIGN_ALPHA;
+                        const dimmedAlpha = bg
+                            ? wcagAlphaForContrast(
+                                  fg,
+                                  bg,
+                                  FG_DIMMED_DESIGN_ALPHA,
+                                  WCAG_AA_LARGE_RATIO
+                              )
+                            : FG_DIMMED_DESIGN_ALPHA;
                         root.style.setProperty(
                             '--color-fg-secondary',
-                            `rgba(${fg.r}, ${fg.g}, ${fg.b}, 0.75)`
+                            `rgba(${fg.r}, ${fg.g}, ${fg.b}, ${secondaryAlpha})`
                         );
                         root.style.setProperty(
                             '--color-fg-dimmed',
-                            `rgba(${fg.r}, ${fg.g}, ${fg.b}, 0.5)`
+                            `rgba(${fg.r}, ${fg.g}, ${fg.b}, ${dimmedAlpha})`
                         );
                         document.body.style.color = colors.foreground;
                     }

frontend/src/lib/utils/color.ts

@@ -199,13 +199,62 @@ export function copyColor(hex: string): void {
 // photopic luminous efficiency (Rec. 709). Returns 0..1.
 export function relativeLuminance(hex: string): number {
     const {r, g, b} = hexToRgb(hex);
+    return luminanceRgb(r, g, b);
+}
+
+function luminanceRgb(r: number, g: number, b: number): number {
     const chan = (v: number) => {
         const s = v / 255;
         return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
     };
     return 0.2126 * chan(r) + 0.7152 * chan(g) + 0.0722 * chan(b);
 }
 
+// Source-over composite of an RGB foreground at `alpha` over an opaque RGB
+// background. Returns the resulting opaque RGB.
+export function alphaBlend(
+    fg: {r: number; g: number; b: number},
+    bg: {r: number; g: number; b: number},
+    alpha: number
+): {r: number; g: number; b: number} {
+    const a = Math.max(0, Math.min(1, alpha));
+    return {
+        r: fg.r * a + bg.r * (1 - a),
+        g: fg.g * a + bg.g * (1 - a),
+        b: fg.b * a + bg.b * (1 - a),
+    };
+}
+
+// Smallest alpha in [designAlpha, 1] such that the alpha-blended fg over bg
+// meets `targetRatio`. Returns `designAlpha` if it already passes; returns 1
+// if even fully opaque can't reach the target (theme's own contrast is too
+// weak — caller decides what to do).
+export function wcagAlphaForContrast(
+    fg: {r: number; g: number; b: number},
+    bg: {r: number; g: number; b: number},
+    designAlpha: number,
+    targetRatio: number
+): number {
+    const lbg = luminanceRgb(bg.r, bg.g, bg.b);
+    const ratioAt = (a: number) => {
+        const c = alphaBlend(fg, bg, a);
+        const lc = luminanceRgb(c.r, c.g, c.b);
+        const hi = Math.max(lc, lbg);
+        const lo = Math.min(lc, lbg);
+        return (hi + 0.05) / (lo + 0.05);
+    };
+    if (ratioAt(designAlpha) >= targetRatio) return designAlpha;
+    if (ratioAt(1) < targetRatio) return 1;
+    let lo = designAlpha;
+    let hi = 1;
+    for (let i = 0; i < 14; i++) {
+        const mid = (lo + hi) / 2;
+        if (ratioAt(mid) >= targetRatio) hi = mid;
+        else lo = mid;
+    }
+    return hi;
+}
+
 export type ContrastLevel = 'AAA' | 'AA' | 'AA-L' | 'fail';
 
 /**