marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix(#92): fix ink-2 and ink-3 contrast to meet WCAG AA across all modes #107

Merged
marcel merged 1 commits from feature/92-fix-secondary-text-contrast into main 2026-03-27 16:05:03 +01:00
Conversation 0 Commits 1 Files Changed 1 +4 -4
marcel commented 2026-03-27 15:52:20 +01:00
Owner
Copy Link

Closes #92
Closes #93

Contrast failures fixed

Token Before After Ratio (worst bg) Status
light ink-2 #6b7280 #4b5563 4.2:1 on canvas → 6.6:1 ✓ AA
light ink-3 #9ca3af #6b7280 2.6:1 on white → 4.8:1 ✓ AA
dark ink-3 #6b7280 #8b97a5 4.0:1 on surface → 6.5:1 ✓ AA
dark ink-2 #9ca3af unchanged 7.5:1 on surface ✓ AAA

One CSS file changed (layout.css) — all token consumers pick up the fix automatically. Both the @media (prefers-color-scheme: dark) and [data-theme='dark'] sections updated.

This also fixes #93 (section labels "FILE", "MORE DETAILS", "OPTIONAL" using text-ink-3 uppercase) since they all consume the ink-3 token. Hardcoded text-gray-400/text-gray-500 bypasses in the enrich pages are addressed separately.

Note on ink-3: light mode ink-3 (#6b7280) passes AA on surface (white, 4.8:1) but is 4.2:1 on canvas (#f0efe9). It should only be used for genuinely decorative/placeholder text on canvas-background screens; all readable secondary text should use ink-2.

Test plan

  • Light mode: secondary text (nav links, metadata labels, filter buttons) is visibly darker than before but not as heavy as primary ink
  • Light mode: section headings ("FILE", "WHO AND WHEN", etc.) are readable — no longer washed out
  • Dark mode: secondary text remains readable, not too bright
  • Run contrast check on any text-ink-2 element in light mode: ≥ 4.5:1
  • Run contrast check on any text-ink-3 element on white surface: ≥ 4.5:1
  • No visual regression on forms, cards, nav, admin tabs
Closes #92 Closes #93 ## Contrast failures fixed | Token | Before | After | Ratio (worst bg) | Status | |---|---|---|---|---| | light `ink-2` | `#6b7280` | `#4b5563` | 4.2:1 on canvas → **6.6:1** | ✓ AA | | light `ink-3` | `#9ca3af` | `#6b7280` | 2.6:1 on white → **4.8:1** | ✓ AA | | dark `ink-3` | `#6b7280` | `#8b97a5` | 4.0:1 on surface → **6.5:1** | ✓ AA | | dark `ink-2` | `#9ca3af` | unchanged | 7.5:1 on surface | ✓ AAA | One CSS file changed (`layout.css`) — all token consumers pick up the fix automatically. Both the `@media (prefers-color-scheme: dark)` and `[data-theme='dark']` sections updated. This also fixes #93 (section labels "FILE", "MORE DETAILS", "OPTIONAL" using `text-ink-3 uppercase`) since they all consume the `ink-3` token. Hardcoded `text-gray-400`/`text-gray-500` bypasses in the enrich pages are addressed separately. **Note on `ink-3`:** light mode ink-3 (`#6b7280`) passes AA on `surface` (white, 4.8:1) but is 4.2:1 on `canvas` (`#f0efe9`). It should only be used for genuinely decorative/placeholder text on canvas-background screens; all readable secondary text should use `ink-2`. ## Test plan - [ ] Light mode: secondary text (nav links, metadata labels, filter buttons) is visibly darker than before but not as heavy as primary `ink` - [ ] Light mode: section headings ("FILE", "WHO AND WHEN", etc.) are readable — no longer washed out - [ ] Dark mode: secondary text remains readable, not too bright - [ ] Run contrast check on any `text-ink-2` element in light mode: ≥ 4.5:1 - [ ] Run contrast check on any `text-ink-3` element on white surface: ≥ 4.5:1 - [ ] No visual regression on forms, cards, nav, admin tabs
marcel added 1 commit 2026-03-27 15:52:20 +01:00
fix(#92): fix ink-2 and ink-3 contrast to meet WCAG AA across all modes
Some checks failed
CI / Unit & Component Tests (push) Successful in 2m35s
Details
CI / Backend Unit Tests (push) Successful in 2m19s
Details
CI / E2E Tests (push) Failing after 26m8s
Details
CI / Unit & Component Tests (pull_request) Successful in 2m30s
Details
CI / Backend Unit Tests (pull_request) Successful in 2m14s
Details
CI / E2E Tests (pull_request) Failing after 25m54s
Details
215f43c0dc 
Light mode:
- ink-2 #6b7280 → #4b5563 (gray-600): was 4.2:1 on canvas — now 6.6:1 ✓
- ink-3 #9ca3af → #6b7280 (gray-500): was 2.6:1 on white — now 4.8:1 ✓

Dark mode:
- ink-3 #6b7280 → #8b97a5: was 4.0:1 on dark surface — now 6.5:1 ✓
- ink-2 #9ca3af unchanged (already 7.5:1 — WCAG AAA)

Both the media-query and manual-override dark sections updated.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
marcel merged commit d053f6dc40 into main 2026-03-27 16:05:03 +01:00
marcel deleted branch feature/92-fix-secondary-text-contrast 2026-03-27 16:05:09 +01:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
P0-critical
Blocks a core user journey, causes data loss, or is a security/accessibility barrier. Work on this before P1+.
 P1-high
Significant friction on a main user journey; workaround exists but is non-obvious. Next up after P0.
 P2-medium
Noticeable improvement; doesn't block anything; schedule opportunistically.
 P3-later
Cosmetic or parking-lot work; fine to stay open indefinitely.
 audit
Read-only audit / assessment work; produces a report rather than changing code
 bug
Something isn't working
 cleanup
Removal of dead code, vague comments, naming violations, and scratch artifacts
 collaboration
We want to extend the family archive to have more collaboration tools
 conversation
descoped
We will do that later
 devops
documentation
README, ARCHITECTURE, GLOSSARY, CONTRIBUTING, per-domain docs
 epic
Marker for epic-level issues that group multiple child issues
 feature
file-upload
legibility
Codebase Legibility Refactor — preparing the codebase for human evaluation and bus-factor reduction
 notification
person
phase-1: security
Security hygiene — must be done first
 phase-2: container-images
Production-ready multi-stage Docker images
 phase-3: prod-compose
Production compose overlay + Caddy reverse proxy
 phase-4: spring-prod-profile
Spring Boot production configuration profile
 phase-5: backups
Database and object storage backup strategy
 phase-6: deployment-docs
.env.example, DEPLOYMENT.md, runbook
 phase-7: monitoring
Prometheus, Loki, Grafana, Alertmanager
 refactor
Code restructuring without behaviour change
 security
test
ui
UI/UX and accessibility issues
 user
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
Jens marcel
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: marcel/familienarchiv#107
Delete Branch "feature/92-fix-secondary-text-contrast"

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?