jake/Lumotia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): P1/P2/G3/FR3 — darken tertiary/accent/success/danger tokens to meet AA

Browse Source 
Phase 10a a11y audit (2026-04-29) flagged 14 contrast failures rooted in
four tokens. Single token-level change resolves them across both themes.

P1 (text-text-tertiary): #8a8578 → #6b6557 light, #716b60 → #8c8678 dark.
  Token was used as both decorative tertiary and body-grade label, so it
  must clear AA 4.5:1. Lifts ratios from ~3.3-3.7:1 to ~4.7-5.0:1 across
  the surfaces it appears on (sidebar tagline + footer, dictation footer,
  files hint, tasks empty state, history empty state, settings descriptions
  and section labels, shutdown trail copy, first-run skip links).

P2 (color-accent): #b87a4a → #a06a3e light, #e8a87c → #c98555 dark. White
  text on accent fill (Browse Files button, selected segmented pills,
  link-style buttons) now clears AA. Dark theme worst case was 2.03:1 on
  Browse Files; the new dark accent clears 4.5:1 with white. Subtle/hover/
  glow tokens recomputed off the new bases.

G3 (color-success light): #3d8a5a → #2f7549. Sidebar Ready status text
  and other success copy on cream surfaces clears AA.

FR3 / D4 (color-danger light): #c44d4d → #a83838. Browser-mode warning
  and hardware-probe error copy clears AA on cream.

Resolves: G1, G2, G3, D1, D2, D3, D4, F1, F3, F4, T5, H2, S1, S2, S3,
SD2, FR2, FR3.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jake
2026-04-29 12:03:37 +01:00
parent be5a7146ca
commit 2da0a5bab8
1 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/app.css
View File

@@ -50,13 +50,19 @@
/* Text — warm hierarchy */
--color-text: #f0ece4;
--color-text-secondary: #9a9486;
--color-text-tertiary: #716b60;
/* Phase 10a a11y P1: lifted from #716b60 to #8c8678 to clear AA 4.5:1 on
the dark surfaces this token is used on. Used as both decorative and
body-grade label, so the token has to meet AA. */
--color-text-tertiary: #8c8678;
/* Accent — warm amber/copper */
--color-accent: #e8a87c;
--color-accent-hover: #d4976a;
--color-accent-subtle: #e8a87c10;
--color-accent-glow: #e8a87c25;
/* Accent — warm amber/copper.
Phase 10a a11y P2: dark accent darkened from #e8a87c to #c98555 so the
"Browse Files" filled button (white text on accent fill) clears AA in
dark theme. Subtle / hover / glow recomputed off the new base. */
--color-accent: #c98555;
--color-accent-hover: #b8754a;
--color-accent-subtle: #c9855510;
--color-accent-glow: #c9855525;
/* Semantic */
--color-success: #7ec89a;
@@ -109,15 +115,22 @@
--color-text: #1a1816;
--color-text-secondary: #5c574d;
--color-text-tertiary: #8a8578;
/* Phase 10a a11y P1: darkened from #8a8578 to #6b6557 to clear AA 4.5:1
on cream/card surfaces in light theme. */
--color-text-tertiary: #6b6557;
--color-accent: #b87a4a;
--color-accent-hover: #a06b3e;
--color-accent-subtle: #b87a4a10;
--color-accent-glow: #b87a4a20;
/* Phase 10a a11y P2: darkened from #b87a4a to #a06a3e so white text on
accent fill (selected pills, primary buttons) clears AA. */
--color-accent: #a06a3e;
--color-accent-hover: #8a5a32;
--color-accent-subtle: #a06a3e10;
--color-accent-glow: #a06a3e20;
--color-success: #3d8a5a;
--color-danger: #c44d4d;
/* Phase 10a a11y G3: darkened success from #3d8a5a to #2f7549 so success
text on light surfaces clears AA. Phase 10a a11y FR3 / D4: darkened
danger from #c44d4d to #a83838 for the same reason. */
--color-success: #2f7549;
--color-danger: #a83838;
--color-warning: #b89a3e;
--color-sidebar: #f5f2ed;