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

bug(a11y): low-contrast secondary text fails WCAG AA across the app #92

New Issue
Closed
opened 2026-03-27 12:19:35 +01:00 by marcel · 0 comments
marcel commented 2026-03-27 12:19:35 +01:00
Owner
Copy Link

Severity: High — accessibility failure (WCAG SC 1.4.3)

Multiple instances of secondary/helper text render in a gray that fails the 4.5:1 contrast ratio required for normal-weight text on a white or near-white background.

Affected elements (light mode):

Element Current approx. color Contrast on white Required
"Forgot password?" link #9CA3AF (gray-400) ~2.5:1 4.5:1
Footer "FAMILIENARCHIV" watermark #C5C1B8 (approx) ~1.8:1 decorative — OK if purely decorative, add aria-hidden="true"
"FROM Unknown" / "TO Unknown" in document rows #9CA3AF ~2.5:1 4.5:1
"Not specified" / "No recipients" in metadata panel #9CA3AF italic ~2.5:1 4.5:1
"SENDER" / "RECIPIENTS" uppercase labels in metadata #9CA3AF ~2.5:1 4.5:1

Fix — brand-compliant color replacements

The brand palette does not include a ready-made "body gray". The correct approach is to use #000000 (brand black) at reduced opacity, or to use #615B66 (Granite Gray) which is the lightest brand secondary that still passes contrast.

Use case Recommended color Contrast on white
Interactive secondary links ("Forgot password?") #615B66 Granite Gray 5.9:1 ✓ AA
Non-interactive helper text ("Not specified") #615B66 5.9:1 ✓ AA
Uppercase micro-labels ("SENDER", "FROM") #615B66 5.9:1 ✓ AA
Footer watermark (decorative) Keep as-is, add aria-hidden="true" decorative exemption

In Tailwind terms: replace text-gray-400 with a custom utility text-granite mapped to #615B66, or use text-gray-600 (#4B5563, 7.3:1) as a safe fallback if the brand token is not yet set up.

Dark mode: on dark backgrounds, #9CA3AF (gray-400) gives ~4.6:1 on #1f1f1f — just barely passes. Safe to keep for dark mode specifically, but verify against the actual dark background color used.

## Severity: High — accessibility failure (WCAG SC 1.4.3) Multiple instances of secondary/helper text render in a gray that fails the 4.5:1 contrast ratio required for normal-weight text on a white or near-white background. **Affected elements (light mode):** | Element | Current approx. color | Contrast on white | Required | |---|---|---|---| | "Forgot password?" link | `#9CA3AF` (gray-400) | ~2.5:1 | 4.5:1 | | Footer "FAMILIENARCHIV" watermark | `#C5C1B8` (approx) | ~1.8:1 | decorative — OK if purely decorative, add `aria-hidden="true"` | | "FROM Unknown" / "TO Unknown" in document rows | `#9CA3AF` | ~2.5:1 | 4.5:1 | | "Not specified" / "No recipients" in metadata panel | `#9CA3AF` italic | ~2.5:1 | 4.5:1 | | "SENDER" / "RECIPIENTS" uppercase labels in metadata | `#9CA3AF` | ~2.5:1 | 4.5:1 | --- ## Fix — brand-compliant color replacements The brand palette does not include a ready-made "body gray". The correct approach is to use `#000000` (brand black) at reduced opacity, or to use `#615B66` (Granite Gray) which is the lightest brand secondary that still passes contrast. | Use case | Recommended color | Contrast on white | |---|---|---| | Interactive secondary links ("Forgot password?") | `#615B66` Granite Gray | 5.9:1 ✓ AA | | Non-interactive helper text ("Not specified") | `#615B66` | 5.9:1 ✓ AA | | Uppercase micro-labels ("SENDER", "FROM") | `#615B66` | 5.9:1 ✓ AA | | Footer watermark (decorative) | Keep as-is, add `aria-hidden="true"` | decorative exemption | In Tailwind terms: replace `text-gray-400` with a custom utility `text-granite` mapped to `#615B66`, or use `text-gray-600` (`#4B5563`, 7.3:1) as a safe fallback if the brand token is not yet set up. **Dark mode:** on dark backgrounds, `#9CA3AF` (gray-400) gives ~4.6:1 on `#1f1f1f` — just barely passes. Safe to keep for dark mode specifically, but verify against the actual dark background color used.
marcel added the ui label 2026-03-27 12:28:16 +01:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
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 ui
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#92
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?