From 4b6a9785c9b061818a3b99046cf2168a33d27028 Mon Sep 17 00:00:00 2001 From: Peter Steinberger Date: Sun, 9 Aug 2026 22:30:50 -0700 Subject: [PATCH] fix(ui): dark-mode body text renders brighter than the dark-reading comfort band (#121409) * fix(ui): soften default dark-mode body text to ~12:1 contrast Drop --text/--chat-text from #d4d4d8 (12.87:1 on --bg) to #cdcdd1 (12.01:1 on --bg, 11.10:1 on --card) so dark body text sits inside the 10-12 comfort band instead of above it; brighter body text halates on dark backgrounds. Light mode, openknot, dash, --text-strong, and --muted are unchanged. * fix(ui): dim dark body text a further step to ~11.4:1 #cdcdd1 -> #c8c8cc (11.41:1 on --bg, 10.54:1 on --card), mid-band instead of top-of-band. * fix(ui): settle dark body text at ~10:1 on --bg #c8c8cc -> #bcbcc0 (10.05:1 on --bg, 9.29:1 on --card) per visual preview pick; low end of the dark comfort band on the page, slightly under it on cards, still well above AAA. * docs(ui): sync design-system guides with new dark --text token ClawSweeper P3: color-tokens.md and accessibility.md still published #d4d4d8 (~12.9:1); both now name #bcbcc0 (~10.1:1). --- ui/docs/design-system/accessibility.md | 2 +- ui/docs/design-system/color-tokens.md | 2 +- ui/src/styles/base.css | 8 +++++--- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/ui/docs/design-system/accessibility.md b/ui/docs/design-system/accessibility.md index 63722c22cf52..34aa70fe3da6 100644 --- a/ui/docs/design-system/accessibility.md +++ b/ui/docs/design-system/accessibility.md @@ -8,7 +8,7 @@ OpenClaw targets **WCAG 2.1 AA**. This checklist applies to every UI component | Context | Minimum Ratio | Notes | | ----------------------------------------- | ---------------- | -------------------------------------------------- | -| Normal body text (< 18px / < 14px bold) | **4.5:1** | Use `--text` (#d4d4d8) or stronger on `--bg` | +| Normal body text (< 18px / < 14px bold) | **4.5:1** | Use `--text` (#bcbcc0) or stronger on `--bg` | | Large text (≥ 18px regular / ≥ 14px bold) | **3:1** | Headings in chat thread | | UI component boundaries (inputs, buttons) | **3:1** | Border colours against adjacent background | | Focus indicators | **3:1** (AA) | `--focus-ring` / `--focus-glow` already compliant | diff --git a/ui/docs/design-system/color-tokens.md b/ui/docs/design-system/color-tokens.md index 4cfa8459be14..a2d5e7212933 100644 --- a/ui/docs/design-system/color-tokens.md +++ b/ui/docs/design-system/color-tokens.md @@ -32,7 +32,7 @@ Light mode uses a warm paper palette: ivory backgrounds, warm gray borders (`#e8 | Token | Dark Value | Contrast on `--bg` | Use | | ---------------- | ---------- | ------------------ | -------------------------------------------------- | -| `--text` | `#d4d4d8` | ~12.9:1 ✅ | Body copy, labels | +| `--text` | `#bcbcc0` | ~10.1:1 ✅ | Body copy, labels | | `--text-strong` | `#f4f4f5` | ~17.3:1 ✅ | Headings, emphasis | | `--muted` | `#8b8b94` | ~5.6:1 ✅ | Placeholder, metadata | | `--muted-strong` | `#898990` | ~5.5:1 ✅ | Secondary text, captions; prefer `--text` for body | diff --git a/ui/src/styles/base.css b/ui/src/styles/base.css index 87eae82c9bcf..ee866ca11a57 100644 --- a/ui/src/styles/base.css +++ b/ui/src/styles/base.css @@ -21,11 +21,13 @@ --chrome-strong: rgba(14, 16, 21, 0.98); /* Text - Clean contrast - * Keep --muted AA on dark surfaces; do not dim muted body text with opacity. */ + * Keep --muted AA on dark surfaces; do not dim muted body text with opacity. + * --text targets ~10:1 on --bg #0e1015 (10.1; 9.3 on --card) — the dark + * comfort band is ~10-12 and brighter body text halates on dark. */ - --text: #d4d4d8; + --text: #bcbcc0; --text-strong: #f4f4f5; - --chat-text: #d4d4d8; + --chat-text: #bcbcc0; --muted: #8b8b94; --muted-strong: #898990; --muted-foreground: #8b8b94;