From 060a1149e07372882b8eb4ecda6767718d57fa81 Mon Sep 17 00:00:00 2001 From: Marcel Date: Wed, 29 Apr 2026 09:02:38 +0200 Subject: [PATCH] fix(person-mention): bump underline contrast so the link is visible at rest MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- frontend/src/routes/layout.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css index 5e693203..e4d9cce0 100644 --- a/frontend/src/routes/layout.css +++ b/frontend/src/routes/layout.css @@ -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; }