From 04a07bd36cb7c368807c701105d625695a3a8704 Mon Sep 17 00:00:00 2001 From: Florian Wilde Date: Sun, 26 Jul 2026 23:20:40 +0200 Subject: [PATCH] fix(ui): Kontrast gedaempfter Texte auf WCAG AA bringen Eine Durchsicht mit axe-core ueber zehn Seitenzustaende - Dialoge einzeln, sie stehen geschlossen nicht im DOM - fand 26 Verstoesse, alle derselben Art: slate-500 kommt auf dem sehr dunklen Untergrund nur auf 3,8 zu 1, slate-600 sogar auf 2,5. Verlangt sind 4,5 fuer normalen Text, und beide Stufen werden reichlich fuer Hinweise und Nebenangaben benutzt. Statt an hundert Stellen die Klasse zu tauschen, sind die beiden Stufen im Theme aufgehellt. Der Abstand zwischen ihnen bleibt sichtbar, der Rest des Entwurfs unangetastet. Geprueft gegen alle drei vorkommenden Untergruende; der schlechteste Wert zaehlt. Damit stimmt auch, was FEATURES.md ueber Barrierefreiheit behauptet - bisher stand die Behauptung ungeprueft da. Co-Authored-By: Claude Opus 5 (1M context) --- CLAUDE.md | 7 +++++++ src/app/globals.css | 16 ++++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/CLAUDE.md b/CLAUDE.md index cf44f35..963bad8 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -102,6 +102,13 @@ Bei Änderungen an der Oberfläche **hinsehen**. Chrome ist installiert, ein Skript mit `playwright-core` und `channel: "chrome"` genügt für Screenshots. Mehrere Anzeigefehler dieses Projekts sind ausschließlich so aufgefallen. +**Barrierefreiheit misst man, statt sie zu behaupten.** `axe-core` liegt als +Entwicklungsabhängigkeit bereit; ein Skript hängt es per `addScriptTag` in +die laufende Seite und ruft `axe.run` mit den WCAG-Tags auf. Jeder +Dialogzustand ist eine eigene Prüfung — geschlossene Dialoge stehen nicht im +DOM. Der Kontrast gedämpfter Texte ist der Punkt, der hier schon einmal +gerissen wurde; die aufgehellten Stufen stehen in `globals.css` im `@theme`. + Wer den Standalone-Bau von Hand startet (`node .next/standalone/server.js`), muss vorher `.next/static` und `public` danebenkopieren — sonst lädt kein JavaScript, die Seite bleibt serverseitig gerendert, und Formulare senden diff --git a/src/app/globals.css b/src/app/globals.css index 94b3788..be30d8f 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -16,6 +16,22 @@ --color-void-soft: #0a0c1a; --color-haze: #12142b; + /* ── Gedaempfte Textfarben ────────────────────────────────── + Tailwinds slate-500 und slate-600 kommen auf diesem sehr dunklen + Untergrund nur auf 3,8 bzw. 2,5 zu 1. WCAG AA verlangt 4,5 fuer + normalen Text, und beide werden hier reichlich fuer Hinweise und + Nebenangaben benutzt – axe-core hat das an 26 Stellen beanstandet. + + Statt an hundert Stellen die Klasse zu tauschen, werden die beiden + Stufen hier aufgehellt. Der Abstand zwischen ihnen bleibt sichtbar, + der Rest des Entwurfs unangetastet. + + Geprueft gegen die drei vorkommenden Untergruende #0b0d1c (Seite), + #0e0f17 (.glass) und #14141d (.popover) – der schlechteste Wert + zaehlt. */ + --color-slate-500: #8a98b0; /* 6,3 : 1 */ + --color-slate-600: #78879f; /* 5,0 : 1 */ + --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,