From 91dbaee38c4f648fed62da2096261b6d82754665 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Wed, 4 Mar 2026 22:46:27 +0000
Subject: [PATCH] =?UTF-8?q?fix(a11y):=20color=20contrast=20audit=20?=
 =?UTF-8?q?=E2=80=94=20document=20ratios,=20fix=20critical=20text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Documents WCAG AA contrast ratios in main.css. Increases text-white/40
to /50 for settings labels, section headers, and loading states to
meet 4.5:1 minimum contrast ratio.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../app/src/components/chat/SettingsModal.vue   | 12 ++++++------
 .../app/src/components/renderers/PdfViewer.vue  |  2 +-
 packages/app/src/pages/BrowsePage.vue           |  2 +-
 packages/app/src/styles/main.css                | 17 +++++++++++++++++
 4 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/components/chat/SettingsModal.vue b/packages/app/src/components/chat/SettingsModal.vue
index 91278156..c476c47f 100644
--- a/packages/app/src/components/chat/SettingsModal.vue
+++ b/packages/app/src/components/chat/SettingsModal.vue
@@ -34,7 +34,7 @@
 
           <!-- Memory Section -->
           <div class="space-y-2">
-            <h3 class="text-xs font-semibold uppercase tracking-wider text-white/40">
+            <h3 class="text-xs font-semibold uppercase tracking-wider text-white/50">
               Memory ({{ memoryStore.items.length }}/20)
             </h3>
 
@@ -109,14 +109,14 @@
 
           <!-- Advanced Section -->
           <div class="space-y-3">
-            <h3 class="text-xs font-semibold uppercase tracking-wider text-white/40">
+            <h3 class="text-xs font-semibold uppercase tracking-wider text-white/50">
               Advanced
             </h3>
 
             <template v-if="conv">
               <div class="space-y-1">
                 <div class="flex items-center justify-between">
-                  <label class="text-xs text-white/40">Temperature</label>
+                  <label class="text-xs text-white/50">Temperature</label>
                   <span class="text-xs text-white/50 tabular-nums">{{ temperature.toFixed(2) }}</span>
                 </div>
                 <input
@@ -132,7 +132,7 @@
 
               <div class="space-y-1">
                 <div class="flex items-center justify-between">
-                  <label class="text-xs text-white/40">Max Tokens</label>
+                  <label class="text-xs text-white/50">Max Tokens</label>
                   <span class="text-xs text-white/50 tabular-nums">{{ maxTokens }}</span>
                 </div>
                 <input
@@ -148,7 +148,7 @@
 
               <div class="space-y-1">
                 <div class="flex items-center justify-between">
-                  <label class="text-xs text-white/40">Top P</label>
+                  <label class="text-xs text-white/50">Top P</label>
                   <span class="text-xs text-white/50 tabular-nums">{{ topP.toFixed(2) }}</span>
                 </div>
                 <input
@@ -163,7 +163,7 @@
               </div>
 
               <div class="space-y-1">
-                <label class="text-xs text-white/40">Stop Sequences</label>
+                <label class="text-xs text-white/50">Stop Sequences</label>
                 <div v-if="stopSequences.length > 0" class="flex gap-1 flex-wrap mb-1">
                   <span
                     v-for="(seq, i) in stopSequences"
diff --git a/packages/app/src/components/renderers/PdfViewer.vue b/packages/app/src/components/renderers/PdfViewer.vue
index 17ed4f4e..dd2b563d 100644
--- a/packages/app/src/components/renderers/PdfViewer.vue
+++ b/packages/app/src/components/renderers/PdfViewer.vue
@@ -60,7 +60,7 @@
     <!-- PDF canvas container -->
     <div ref="containerRef" class="flex-1 overflow-auto bg-black/20 p-4 flex justify-center">
       <div v-if="loading" class="flex items-center justify-center h-full">
-        <div class="text-sm text-white/40">Loading PDF...</div>
+        <div class="text-sm text-white/50">Loading PDF...</div>
       </div>
       <div v-else-if="error" class="flex items-center justify-center h-full">
         <div class="text-sm text-red-400/70">{{ error }}</div>
diff --git a/packages/app/src/pages/BrowsePage.vue b/packages/app/src/pages/BrowsePage.vue
index 14c632d1..ae39414d 100644
--- a/packages/app/src/pages/BrowsePage.vue
+++ b/packages/app/src/pages/BrowsePage.vue
@@ -35,7 +35,7 @@
       <!-- File tree / project list -->
       <div class="flex-1 overflow-y-auto px-2 py-2">
         <div v-if="loading" class="flex items-center justify-center h-32">
-          <span class="text-sm text-white/40">Loading...</span>
+          <span class="text-sm text-white/50">Loading...</span>
         </div>
         <div v-else-if="error" class="flex items-center justify-center h-32">
           <span class="text-sm text-red-400/70">{{ error }}</span>
diff --git a/packages/app/src/styles/main.css b/packages/app/src/styles/main.css
index 05c1f8a6..e62e42ab 100644
--- a/packages/app/src/styles/main.css
+++ b/packages/app/src/styles/main.css
@@ -1,5 +1,22 @@
 @import "tailwindcss";
 
+/*
+ * WCAG AA Color Contrast Audit (against #0a0a0a background)
+ *
+ * text-white/25: ~2.3:1 — FAIL (placeholder only, acceptable per WCAG)
+ * text-white/40: ~3.8:1 — FAIL (used for muted labels; borderline)
+ * text-white/50: ~5.4:1 — PASS (minimum for readable body text)
+ * text-white/60: ~7.2:1 — PASS
+ * text-white/70: ~9.1:1 — PASS
+ * text-white/80: ~11.3:1 — PASS
+ * text-white/90: ~13.7:1 — PASS
+ * #F7931A (accent): ~8.7:1 — PASS
+ *
+ * Note: text-white/40 is used as "muted" throughout the design system.
+ * For decorative labels and supplementary info this is acceptable.
+ * For readable body text, use text-white/50 minimum.
+ */
+
 @theme {
   --color-primary: #606060;
   --color-primary-light: #808080;