From 18467bd818276edd300ad5c11490bb70b874745b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=7BAI=7Df=20D=2E=20M=C3=BCller?=
 <ralf.d.mueller+AI@gmail.com>
Date: Sun, 17 May 2026 18:21:01 +0200
Subject: [PATCH] fix(a11y): raise --color-text-secondary to gray-600 for WCAG
 AA contrast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #492 (the Lighthouse CI accessibility gate).

The Lighthouse CI job has been red on every main run since 2026-05-14:
the homepage scored 0.97 on accessibility, below the gate's required
1.0. The whole 0.97 came from the color-contrast audit.

--color-text-secondary was gray-500 (#6b7280). On --color-bg-secondary
(#f3f4f6) — the hero's "without semantic anchor" example card — that is
~4.1:1, below the WCAG AA 4.5:1 threshold. Raised to gray-600 (#4b5563),
which clears 4.5:1 on both --color-bg and --color-bg-secondary. Dark mode
already passed and is unchanged.

Also dropped the opacity-60 from the footer's "(DE)" / "(EN)" language
tags, which pushed those spans below the threshold regardless of the
token.

Verified locally with the exact CI setup (desktop preset, Lighthouse
12.6.1): accessibility now 1.0, color-contrast passes.

Note: the label-content-name-mismatch audit still flags the anchor
cards, but it carries weight 0 in Lighthouse's accessibility score and
does not affect the gate. Its root cause is the card's role="button"
wrapping nested interactive elements (copy/edit) — an architectural fix
tracked separately, not bundled here.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 website/src/components/footer.js | 4 ++--
 website/src/styles/main.css      | 3 ++-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/website/src/components/footer.js b/website/src/components/footer.js
index beb49d3..03e1daf 100644
--- a/website/src/components/footer.js
+++ b/website/src/components/footer.js
@@ -81,7 +81,7 @@ export function renderFooter(version) {
                 class="h-6 w-auto"
                 loading="lazy"
               />
-              <span class="text-xs text-[var(--color-text-secondary)]">HMZE <span class="opacity-60">(DE)</span></span>
+              <span class="text-xs text-[var(--color-text-secondary)]">HMZE (DE)</span>
             </a>
             <span class="text-gray-300 dark:text-gray-600">|</span>
             <a
@@ -99,7 +99,7 @@ export function renderFooter(version) {
                 class="h-6 w-auto"
                 loading="lazy"
               />
-              <span class="text-xs text-[var(--color-text-secondary)]">rabauer.dev <span class="opacity-60">(EN)</span></span>
+              <span class="text-xs text-[var(--color-text-secondary)]">rabauer.dev (EN)</span>
             </a>
           </div>
         </div>
diff --git a/website/src/styles/main.css b/website/src/styles/main.css
index 226b531..5b9aae6 100644
--- a/website/src/styles/main.css
+++ b/website/src/styles/main.css
@@ -10,7 +10,8 @@
   --color-bg: #ffffff;
   --color-bg-secondary: #f3f4f6;
   --color-text: #1f2937;
-  --color-text-secondary: #6b7280;
+  /* gray-600, not gray-500: clears WCAG AA 4.5:1 on --color-bg-secondary */
+  --color-text-secondary: #4b5563;
   --color-border: #e5e7eb;
 }