From 4ba7b50336f8ec14e7732f7c71d43e9844eed6e7 Mon Sep 17 00:00:00 2001 From: Claude Fable 5 Date: Tue, 21 Jul 2026 14:26:54 +0200 Subject: [PATCH] =?UTF-8?q?#167:=20Farbkontraste=20=E2=80=94=20Dark-Shell,?= =?UTF-8?q?=20Wikilink-Unterstreichung,=20Feld-R=C3=A4nder?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Die öffentliche Server-Shell bekommt AA-geprüfte Dark-Mode-Farben (color-scheme: light dark hatte den UA dunkel rendern lassen, Links fielen durch 1.4.3; Text 14,8:1, Links 10,1:1, Muted 8,5:1). Wikilinks tragen eine permanente Unterstreichung — Farbe allein war das einzige Link-Merkmal bei nur 2,5:1 Abstand zum Fließtext (1.4.1). Neues Token --color-border-input (#7d8a97, 3,5:1/3,3:1) für Eingabefeld-Ränder (1.4.11); Wächter-Kommentar am Favoriten-Gold. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01AGM8jo3hwoV9wsCVGfy8iq --- apps/api/src/public/html-shell.ts | 10 ++++++++++ apps/web/src/styles/base.css | 8 +++++--- apps/web/src/styles/tokens.css | 7 ++++++- 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/apps/api/src/public/html-shell.ts b/apps/api/src/public/html-shell.ts index 6a91319..84be3e7 100644 --- a/apps/api/src/public/html-shell.ts +++ b/apps/api/src/public/html-shell.ts @@ -45,6 +45,16 @@ export function htmlDocument({ pre { overflow-x: auto; } .public-footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #64748b; font-size: 0.9rem; } + .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; + clip-path: inset(50%); white-space: nowrap; } + /* color-scheme allows dark UA rendering, so give it AA-checked colors + (issue #167, WCAG 1.4.3): text 14.8:1, links 10.1:1, muted 8.5:1. */ + @media (prefers-color-scheme: dark) { + body { background: #10161d; color: #e2e8f0; } + a { color: #93c5fd; } + .public-page__pond, .public-footer { color: #a7b3c0; } + .public-footer { border-top-color: #a7b3c0; } + } diff --git a/apps/web/src/styles/base.css b/apps/web/src/styles/base.css index 809dc0f..4d0024a 100644 --- a/apps/web/src/styles/base.css +++ b/apps/web/src/styles/base.css @@ -688,7 +688,7 @@ button { .field select { width: 100%; padding: var(--space-2) var(--space-3); - border: 1px solid var(--color-border); + border: 1px solid var(--color-border-input); border-radius: var(--radius); font: inherit; background: var(--color-bg); @@ -2457,12 +2457,14 @@ ul[data-type='task_list'] li p:last-of-type { .wikilink { color: var(--color-accent); text-decoration: none; - border-bottom: 1px solid transparent; + /* Permanently visible: color alone must not be the only link cue + (issue #167, WCAG 1.4.1 — accent vs. text is only ~2.5:1). */ + border-bottom: 1px solid currentColor; cursor: pointer; } .wikilink:hover { - border-bottom-color: currentColor; + border-bottom-width: 2px; } /* A link to a page that does not exist yet. */ diff --git a/apps/web/src/styles/tokens.css b/apps/web/src/styles/tokens.css index b9fc9bd..380f34e 100644 --- a/apps/web/src/styles/tokens.css +++ b/apps/web/src/styles/tokens.css @@ -22,11 +22,16 @@ * background entirely (#120). */ --color-surface: #ffffff; --color-border: #d9e2ec; + /* Boundaries of interactive controls (inputs, selects) need 3:1 against + both backgrounds (WCAG 1.4.11) — #d9e2ec is only ~1.3:1. */ + --color-border-input: #7d8a97; --color-accent: #2f6f4f; --color-accent-contrast: #ffffff; --color-danger: #ab091e; --color-ok: #14803c; - /* Favorite stars and tree icons (issue #132) — a readable gold. */ + /* Favorite stars and tree icons (issue #132) — a readable gold. ICON + use only: 3.25:1 passes the 3:1 non-text minimum but NOT the 4.5:1 + required for text (audit A11Y-024c). */ --color-favorite: #b8860b; /* Spacing scale (rem-based). */