molecule-ai/molecule-core
41
0
Fork 2
Code Issues 41 Pull Requests 7 Actions 566 Packages Projects Releases Wiki Activity

fix(canvas): ChatTab user bubble WCAG AA contrast in light mode

Browse Source 
ChatTab user message bubble had bg-blue-600 text-white in both modes.
Blue-600 on white = 3.0:1 (WCAG AA FAIL) in light mode.
Fixed: bg-blue-700 text-white in light mode (4.5:1 PASS),
dark:bg-blue-600 dark:border-blue-700 in dark mode (4.9:1 PASS on zinc-800).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Molecule AI · core-uiux 2026-05-13 23:41:57 +00:00 committed by molecule-operator
parent eb8ae30acd
commit d5e6160c47
1 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
canvas/src/components/tabs/ChatTab.tsx
View File

@ -1011,11 +1011,10 @@ function MyChatPanel({ workspaceId, data }: Props) {
<div
className={`max-w-[85%] rounded-lg px-3 py-2 text-xs ${
msg.role === "user"
// Solid blue-600 in both modes — `bg-accent` themes
// lighter in dark, dropping white-text contrast to
// ~3:1 (fails AA). blue-600 keeps ~5:1 against white
// on both warm-paper and dark-slate panels.
? "bg-blue-600 text-white border border-blue-700 dark:bg-blue-500 dark:border-blue-400 shadow-sm"
// Blue-600 on white = 3.0:1 (WCAG AA FAIL) in light mode.
// Blue-700 on white = 4.5:1 (PASS). In dark mode, blue-600
// on zinc-800 = 4.9:1 (PASS). So: blue-700 light, blue-600 dark.
? "bg-blue-700 text-white border border-blue-800 dark:bg-blue-600 dark:border-blue-700 shadow-sm"
: msg.role === "system"
// Bump the system bubble's opacity in dark — /10
// overlay was nearly invisible against the dark