From 2da0a5bab8ab47899ebec99b688f3eab725342db Mon Sep 17 00:00:00 2001 From: Jake Date: Wed, 29 Apr 2026 12:03:37 +0100 Subject: [PATCH] =?UTF-8?q?fix(a11y):=20P1/P2/G3/FR3=20=E2=80=94=20darken?= =?UTF-8?q?=20tertiary/accent/success/danger=20tokens=20to=20meet=20AA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- src/app.css | 39 ++++++++++++++++++++++++++------------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/src/app.css b/src/app.css index 7011d4e..425eaf3 100644 --- a/src/app.css +++ b/src/app.css @@ -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;