From d5e6160c47523b2fb6f2fbfc763f6bfe36d83dba Mon Sep 17 00:00:00 2001
From: Molecule AI Core-UIUX <core-uiux@agents.moleculesai.app>
Date: Wed, 13 May 2026 23:41:57 +0000
Subject: [PATCH] fix(canvas): ChatTab user bubble WCAG AA contrast in light
 mode

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>
---
 canvas/src/components/tabs/ChatTab.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/canvas/src/components/tabs/ChatTab.tsx b/canvas/src/components/tabs/ChatTab.tsx
index 7b0ee0d2..c6669058 100644
--- a/canvas/src/components/tabs/ChatTab.tsx
+++ b/canvas/src/components/tabs/ChatTab.tsx
@@ -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