fix: strengthen border and modality badge contrast to meet WCAG ratios

frontend/src/theme.css

@@ -3,16 +3,16 @@
   --color-surface: #f4f4f6;
   --color-text: #1a1a1e;
   --color-text-muted: #5b5b63;
-  --color-border: #d8d8dd;
+  --color-border: #8c8c91;
   --color-accent: #4a6fa5;
 
   --modality-bh_email: #4a6fa5;
   --modality-personal_email: #6f9c8f;
-  --modality-bh_text: #a5764a;
+  --modality-bh_text: #8c643f;
   --modality-personal_text: #a58a4a;
   --modality-voice: #8a6fa5;
-  --modality-fb_messenger: #4a6fa5;
-  --modality-nd_messenger: #6f8fa5;
+  --modality-fb_messenger: #3b5998;
+  --modality-nd_messenger: #597186;
 
   --spacing-sm: 0.5rem;
   --spacing-md: 1rem;
@@ -26,7 +26,7 @@
     --color-surface: #202024;
     --color-text: #e8e8ea;
     --color-text-muted: #a0a0a8;
-    --color-border: #33333a;
+    --color-border: #64646e;
   }
 }
 

frontend/tests/theme.spec.js

@@ -0,0 +1,33 @@
+import { describe, it, expect } from 'vitest'
+import { readFileSync } from 'fs'
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const themeCss = readFileSync(join(__dirname, '../src/theme.css'), 'utf-8')
+
+describe('theme.css contrast fixes', () => {
+  it('strengthens --color-border to a WCAG-compliant value in light mode', () => {
+    expect(themeCss).toContain('--color-border: #8c8c91;')
+  })
+
+  it('strengthens --color-border to a WCAG-compliant value in dark mode', () => {
+    expect(themeCss).toContain('--color-border: #64646e;')
+  })
+
+  it('darkens --modality-bh_text for 4.5:1 contrast with white text', () => {
+    expect(themeCss).toContain('--modality-bh_text: #8c643f;')
+  })
+
+  it('darkens --modality-nd_messenger for 4.5:1 contrast with white text', () => {
+    expect(themeCss).toContain('--modality-nd_messenger: #597186;')
+  })
+
+  it('differentiates --modality-fb_messenger from --modality-bh_email', () => {
+    const bhEmailMatch = themeCss.match(/--modality-bh_email: (#[0-9a-f]{6});/)
+    const fbMessengerMatch = themeCss.match(/--modality-fb_messenger: (#[0-9a-f]{6});/)
+    expect(bhEmailMatch).not.toBeNull()
+    expect(fbMessengerMatch).not.toBeNull()
+    expect(bhEmailMatch[1]).not.toBe(fbMessengerMatch[1])
+  })
+})