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

fix(person-mention): bump underline contrast so the link is visible at rest

Browse Source 
Leonie FINDING-06: text-decoration-color was --c-accent at 60% (~#C9E6E5 on
white = ~1.6:1 contrast). The underline is the only visual signal that this
is a link mid-paragraph, so a barely-visible colour means seniors and
colour-blind users miss the affordance entirely.

Switch to --c-ink at 50% — same ink colour as the text, half opacity. Reads
as a soft underline on any background, passes WCAG 1.4.11 non-text contrast
on every brand surface.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-29 09:02:38 +02:00
parent 558e1e6b22
commit 060a1149e0
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/routes/layout.css
View File

@@ -335,13 +335,17 @@
Underline at rest is required for WCAG AA — colour alone fails 8% of men
with red-green colour-blindness. Focus ring uses a box-shadow + border-radius
so the rectangle doesn't touch the glyphs.
Underline colour uses --c-ink at 50% so the link affordance is visible on
any surface, including sand-tinted backgrounds where the previous mint
accent at 60% (~1.6:1 on white — Leonie FINDING-06) was barely perceptible.
*/
.person-mention {
color: var(--c-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: color-mix(in srgb, var(--c-accent) 60%, transparent);
text-decoration-color: color-mix(in srgb, var(--c-ink) 50%, transparent);
cursor: pointer;
transition: text-decoration-color 0.15s ease;
}