stwaidele/dorfteich
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 22 Wiki Activity

#167: Farbkontraste — Dark-Shell, Wikilink-Unterstreichung, Feld-Ränder

Browse Source 
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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01AGM8jo3hwoV9wsCVGfy8iq
This commit is contained in:
Claude Fable 5 2026-07-21 14:26:54 +02:00
parent 2077d92c09
commit 4ba7b50336
3 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/api/src/public/html-shell.ts
View File

@ -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; }
}
</style>
</head>
<body>

8
apps/web/src/styles/base.css
View File

@ -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. */

7
apps/web/src/styles/tokens.css
View File

@ -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). */