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;