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,