From 36a1adf4d7da5ef9c66325ee580c9b3060a64707 Mon Sep 17 00:00:00 2001
From: Marco Sadjadi <marco@buildmymcpserver.local>
Date: Thu, 21 May 2026 19:31:34 +0200
Subject: [PATCH] fix(web): banner contrast meets WCAG AA
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

White on #6366f1 was 4.47:1 — just under the 4.5:1 minimum for small
text (Lighthouse a11y flag). Darkened the banner to #4f46e5 (6.3:1).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 apps/web/components/site-banner.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/web/components/site-banner.tsx b/apps/web/components/site-banner.tsx
index 4641ed7..a8dd917 100644
--- a/apps/web/components/site-banner.tsx
+++ b/apps/web/components/site-banner.tsx
@@ -1,14 +1,15 @@
 // Temporary pre-launch notice. Remove this component and its import in
 // app/layout.tsx once the service is open for production use.
-// Background is set inline so it renders regardless of Tailwind theme wiring.
+// Background is #4f46e5 (not the #6366f1 accent) so white text clears the
+// WCAG AA 4.5:1 contrast ratio for this small text — #6366f1 fell just short.
 export function SiteBanner() {
   return (
     <div
-      style={{ backgroundColor: '#6366f1' }}
-      className="border-b border-[#4f46e5] px-4 py-2 text-center text-[12.5px] font-medium leading-snug text-white"
+      style={{ backgroundColor: '#4f46e5' }}
+      className="border-b border-[#4338ca] px-4 py-2 text-center text-[12.5px] font-medium leading-snug text-white"
     >
       <span className="font-semibold uppercase tracking-wide">Preview</span>
-      <span className="px-1.5 opacity-70">·</span>
+      <span className="px-1.5">·</span>
       BuildMyMCPServer is not yet open for production use — sign-ups, server generation and billing
       are still being finalised, and data may be reset.
     </div>