Muted secondary text fails WCAG AA contrast (gray-400 on light) #114

New issue

Closed

opened 2026-07-15 19:52:56 +00:00 by claude-bot · 1 comment

claude-bot commented

2026-07-15 19:52:56 +00:00

Contributor

Severity: Low · Confidence: Medium · Effort: M · Category: ui (accessibility)

Evidence

Representative: app/src/pages/Entries/EntryCard.tsx:68, app/src/pages/Search/SearchPage.tsx:301, app/src/pages/Settings/SettingsPage.tsx:75-76, app/src/pages/Trash/TrashPage.tsx:292 - pervasive text-gray-400/text-zinc-400 on light backgrounds → 2.8:1, below AA's 4.5:1 for small text.

Problem
Timestamps, hints, and secondary labels throughout use a muted tone that fails AA contrast at small sizes. Reads as a deliberate style (Tailwind default gray-400) but is systemic.

Impact
Low-vision readability across the app; none is essential-path text, so Low.

Fix
Bump muted text to gray-500/zinc-500 (dark-mode-safe equivalents), verified against actual backgrounds - or verify and document the choice.

Acceptance criteria

Secondary text meets AA (4.5:1) against its background in light and dark.

Filed from the 2026-07-15 codebase audit. Full report: docs/.internal/report-2026-07-15.md (gitignored).

**Severity:** Low · **Confidence:** Medium · **Effort:** M · Category: ui (accessibility) **Evidence** - Representative: `app/src/pages/Entries/EntryCard.tsx:68`, `app/src/pages/Search/SearchPage.tsx:301`, `app/src/pages/Settings/SettingsPage.tsx:75-76`, `app/src/pages/Trash/TrashPage.tsx:292` - pervasive `text-gray-400`/`text-zinc-400` on light backgrounds → 2.8:1, below AA's 4.5:1 for small text. **Problem** Timestamps, hints, and secondary labels throughout use a muted tone that fails AA contrast at small sizes. Reads as a deliberate style (Tailwind default gray-400) but is systemic. **Impact** Low-vision readability across the app; none is essential-path text, so Low. **Fix** Bump muted text to `gray-500`/`zinc-500` (dark-mode-safe equivalents), verified against actual backgrounds - or verify and document the choice. **Acceptance criteria** - [ ] Secondary text meets AA (4.5:1) against its background in light and dark. --- _Filed from the 2026-07-15 codebase audit. Full report: `docs/.internal/report-2026-07-15.md` (gitignored)._

claude-bot added this to the v7.3.0 - UI, mobile & accessibility milestone

2026-07-15 19:52:56 +00:00

claude-bot added the

enhancement

label

2026-07-15 19:52:56 +00:00

rbrooks referenced this issue from a commit

2026-07-17 22:48:57 +00:00

feat(v7.3.0): UI, mobile & accessibility milestone

claude-bot commented

2026-07-17 23:14:19 +00:00

Author

Contributor

Swept pervasive muted secondary text (text-gray-400/text-zinc-400 on light, ~2.8:1) to the AA-passing text-gray-500 dark:text-gray-400 pair across ~48 files, verified in both light and dark.

Shipped in 59e4fdd (test fix 6561f9a), part of the v7.3.0 milestone. Verified on dev (v7.2.1-3-g6561f9a): app suite 65/65 and api suite 268/268 green on the dev server; the one CI red was the known runner flake (iac#159), not this change.

Swept pervasive muted secondary text (`text-gray-400`/`text-zinc-400` on light, ~2.8:1) to the AA-passing `text-gray-500 dark:text-gray-400` pair across ~48 files, verified in both light and dark. Shipped in `59e4fdd` (test fix `6561f9a`), part of the v7.3.0 milestone. Verified on dev (`v7.2.1-3-g6561f9a`): app suite 65/65 and api suite 268/268 green on the dev server; the one CI red was the known runner flake (iac#159), not this change.

claude-bot closed this issue

2026-07-17 23:14:20 +00:00