m/postcards
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

CSS: form field text too light/grey — darken for readability #25

New Issue
Closed
opened 2026-06-17 13:21:55 +00:00 by mAi · 2 comments
mAi commented 2026-06-17 13:21:55 +00:00
Collaborator
Copy Link

What (m, PWA)

The text in the form fields is a light grey that's barely readable — darken it for proper contrast.

Likely the input value text colour (and/or labels/hints) is set to a too-light grey CSS var. Bump it to a darker, high-contrast colour so typed text + labels are clearly legible. Check inputs, textarea, selects, labels, hints in the compose flow — and the field text specifically (placeholder can stay lighter, but the actual entered value must be dark/readable).

Constraints

  • Meet a sensible contrast ratio (WCAG AA-ish) against the field background, light + dark. Mobile-first. CSS-var utilities — don't hardcode if a token exists. No regression to #13/#20/#23/#24.

Sequencing

Same compose-styling shift as #23/#24 (in flight) — folded into that worker. otto-head instructed.

DoD

  • Field text (entered values + labels) is clearly readable (darker), not light grey. build green; commit references this issue.
## What (m, PWA) The text in the form fields is a **light grey that's barely readable** — darken it for proper contrast. Likely the input **value** text colour (and/or labels/hints) is set to a too-light grey CSS var. Bump it to a darker, high-contrast colour so typed text + labels are clearly legible. Check inputs, textarea, selects, labels, hints in the compose flow — and the field text specifically (placeholder can stay lighter, but the actual entered value must be dark/readable). ## Constraints - Meet a sensible contrast ratio (WCAG AA-ish) against the field background, light + dark. Mobile-first. CSS-var utilities — don't hardcode if a token exists. No regression to #13/#20/#23/#24. ## Sequencing Same compose-styling shift as #23/#24 (in flight) — folded into that worker. otto-head instructed. ## DoD - Field text (entered values + labels) is clearly readable (darker), not light grey. build green; commit references this issue.
mAi commented 2026-06-17 13:27:02 +00:00
Author
Collaborator
Copy Link

#25 erledigt — Feldtext jetzt gut lesbar (hoher Kontrast)

In derselben Schicht/Branch wie #23/#24.

Ursache: Die Eingabefelder (Inputs, Wunsch-Adresse, Foto-Dropzone, Teilen-Box) haben in jedem Theme eine feste helle Creme-Fläche (#fffdf8 bzw. #fff), der Text nutzte aber die Theme-Farbe --ink. Im Dämmerung-Theme ist --ink fast weiß (#ece8f1) → fast weißer Text auf heller Fläche = kaum lesbar (das „helle Graue“). Betroffen: getippte Werte, der Adress-Präfix sendmy.cards/…, der Dropzone-Hinweis und die Teilen-Link-Box.

Fix: Theme-unabhängige Feld-Tokens eingeführt:

  • --field-bg: #fffdf8 (helle Feldfläche)
  • --field-ink: #2b2622 (dunkler Text, ~13:1 Kontrast auf der Creme — WCAG AAA)
  • --field-ink-soft: #6b6157 (sekundärer Feldtext / Präfix / Platzhalter, ~5:1 — WCAG AA)

Getippte Werte nutzen jetzt --field-ink in allen drei Themes. Platzhalter (::placeholder) nutzen die weichere Variante — bleiben heller als ein echter Wert, aber klar lesbar. Labels und Hinweise, die auf der (themenabhängigen) Karte sitzen, behalten ihr --ink-soft (dort ist der helle Ton korrekt). Die feste Creme-Farbe ist nun an einer Stelle tokenisiert statt 4× hartkodiert.

go build ./... grün.

Commit: 4a5e53453e

## #25 erledigt — Feldtext jetzt gut lesbar (hoher Kontrast) In derselben Schicht/Branch wie #23/#24. **Ursache:** Die Eingabefelder (Inputs, Wunsch-Adresse, Foto-Dropzone, Teilen-Box) haben in **jedem** Theme eine feste helle Creme-Fläche (`#fffdf8` bzw. `#fff`), der Text nutzte aber die Theme-Farbe `--ink`. Im **Dämmerung**-Theme ist `--ink` fast weiß (`#ece8f1`) → fast weißer Text auf heller Fläche = kaum lesbar (das „helle Graue“). Betroffen: getippte Werte, der Adress-Präfix `sendmy.cards/…`, der Dropzone-Hinweis und die Teilen-Link-Box. **Fix:** Theme-unabhängige Feld-Tokens eingeführt: - `--field-bg: #fffdf8` (helle Feldfläche) - `--field-ink: #2b2622` (dunkler Text, **~13:1** Kontrast auf der Creme — WCAG AAA) - `--field-ink-soft: #6b6157` (sekundärer Feldtext / Präfix / Platzhalter, **~5:1** — WCAG AA) Getippte Werte nutzen jetzt `--field-ink` in allen drei Themes. Platzhalter (`::placeholder`) nutzen die weichere Variante — bleiben heller als ein echter Wert, aber klar lesbar. Labels und Hinweise, die auf der (themenabhängigen) Karte sitzen, behalten ihr `--ink-soft` (dort ist der helle Ton korrekt). Die feste Creme-Farbe ist nun an einer Stelle tokenisiert statt 4× hartkodiert. `go build ./...` grün. Commit: https://mgit.msbls.de/m/postcards/commit/4a5e53453e55c23915d623716ebba5d65c6719d3
mAi commented 2026-06-17 13:35:21 +00:00
Author
Collaborator
Copy Link

✅ Live on sendmy.cards (merge 7ffdf2d)

Shipped in the compose styling block (#23 field consistency, #24 Farbwelt→Farbschema + smaller equal tiles, #25 darker field text). CSS/copy only, build green. Verified: Farbschema label live, Farbwelt gone. Please eyeball spacing/contrast. Not closing — m closes.

## ✅ Live on sendmy.cards (merge `7ffdf2d`) Shipped in the compose styling block (#23 field consistency, #24 Farbwelt→Farbschema + smaller equal tiles, #25 darker field text). CSS/copy only, build green. Verified: Farbschema label live, Farbwelt gone. Please eyeball spacing/contrast. Not closing — m closes.
mAi closed this issue 2026-06-23 15:48:04 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
mAi m
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: m/postcards#25
No description provided.
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?