fix(a11y): raise --color-text-secondary to gray-600 for WCAG AA contrast

[raifdmueller]

Closes #492.

Problem

The Lighthouse CI job has been red on every main run since 2026-05-14 (12+ runs). The homepage scored 0.97 on accessibility; the gate (website/.lighthouserc.json) requires 1.0. The entire 0.97 came from the color-contrast audit.

Fix

--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 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 1.0, color-contrast passes, 90 unit tests green.

Out of scope

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 buttons) — an architectural fix that deserves its own PR rather than being bundled here.

Test plan

• Lighthouse CI job passes (accessibility = 1.0)
• Hero "without" example text and footer language tags are still legible, now at AA contrast

🤖 Generated with Claude Code

Summary by CodeRabbit

Diese Version enthält Verbesserungen der Benutzeroberfläche und der Barrierefreiheit. Die Farbkontraste wurden angepasst um die Lesbarkeit zu erhöhen, und die Sprachkennzeichnungen in der Fußzeile wurden vereinfacht dargestellt.

• Bug Fixes

  • Erhöhte Farbkontraste für bessere Lesbarkeit

• Style

  • Vereinfachte Sprachkennzeichen in der Fußzeile

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: 607ee355-53a4-49fb-b4ad-7a60d65a415b

📥 Commits

Reviewing files that changed from the base of the PR and between 00aa614 and 18467bd.

📒 Files selected for processing (2)

• website/src/components/footer.js
• website/src/styles/main.css

---

Walkthrough

Das Pull Request aktualisiert die sekundäre Textfarbe in der Stilvorlage und vereinfacht die Footer-Beschriftungen. Die CSS-Variable --color-text-secondary wird von #6b7280 auf #4b5563 verdunkelt, um das WCAG-AA-Kontrastverhältnis von 4.5:1 zu erfüllen. Die Branding-Labels für HMZE und rabauer.dev entfernen die verschachtelte Opazitäts-Markup und nutzen einheitliche Plaintext-Labels.

Changes

Footer-Accessibility — Farbkontrast

Layer / Datei(en)	Zusammenfassung
CSS-Variable und Footer-Label-Markup website/src/styles/main.css, website/src/components/footer.js	Die CSS-Variable --color-text-secondary wird von #6b7280 auf #4b5563 verdunkelt und mit WCAG-AA-Kommentar dokumentiert. Die Footer-Branding-Labels werden von verschachtelt, teilweise opak zu einheitlich, vollständig opak vereinfacht, um die neue dunklere Farbe zu nutzen.

🎯 1 (Trivial) | ⏱️ ~3 Minuten

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	Der Titel beschreibt präzise die Hauptänderung: Erhöhung des --color-text-secondary zu Grau-600 für WCAG AA Kontrastanforderungen.
Linked Issues check	✅ Passed	Die PR adressiert erfolgreich das Hauptziel aus #492 (color-contrast-Audit): --color-text-secondary wurde von #6b7280 zu #4b5563 angehoben und opacity-60 bei Footer-Labels entfernt, um WCAG AA 4.5:1 Kontrast zu erreichen.
Out of Scope Changes check	✅ Passed	Alle Änderungen sind direkt auf die Behebung des color-contrast-Audits aus #492 ausgerichtet; die label-content-name-mismatch-Problematik wird bewusst ausgegrenzt und separat verwaltet.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}