From 8d1fe6a329b9d2cfbab2112976dff42bb232e837 Mon Sep 17 00:00:00 2001 From: Sean Davis Date: Mon, 27 Jul 2026 08:09:40 -0600 Subject: [PATCH] Make links visually distinguishable from body text typography.css set `a { color: black }` globally, which is also the body text colour, so links carried no colour affordance. footer.css stripped text-decoration from every footer descendant, removing the underline too, leaving footer links with no distinguishing cue at all. Use --misc-neutral for links. It is the only existing token clearing both relevant thresholds: 4.90:1 against white (WCAG AA for text) and 4.11:1 against --default-body (WCAG 1.4.1, 3:1 where colour separates a link from surrounding text). --primary-p400 gives 8.06:1 on white but only 2.50:1 against body text; --primary is the reverse. In the footer, keep #fff for contrast on the dark background and restore the underline, since colour cannot do the work there. Components that need their own treatment (.header-size a, .header-button, buttons.css) already set colour explicitly and are unaffected; verified in a browser that header links still compute to rgb(7,7,7). Fixes #399 Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01YBSvPwEk6sH1rhGmjPmsFq --- assets/style/base/typography.css | 11 ++++++++++- assets/style/sections/footer.css | 7 ++++++- 2 files changed, 16 insertions(+), 2 deletions(-) diff --git a/assets/style/base/typography.css b/assets/style/base/typography.css index beed2b2fc..9108393a5 100644 --- a/assets/style/base/typography.css +++ b/assets/style/base/typography.css @@ -56,8 +56,17 @@ h6, border: none; } +/* Links need to differ from body text to be recognisable as links. Components + that need another treatment (header, footer, buttons) already set their own + colour, so this only affects links in body content. + + --misc-neutral is chosen over the nearer brand tokens because it clears both + thresholds at once: 4.90:1 against the white background (WCAG AA text) and + 4.11:1 against --default-body (WCAG 1.4.1, which wants 3:1 when colour alone + separates a link from its surrounding text). --primary-p400 manages 8.06:1 on + white but only 2.50:1 against body text; --primary is the reverse. */ a { - color: black; + color: var(--misc-neutral); } @media (max-device-width: 768px),(width <= 768px){ diff --git a/assets/style/sections/footer.css b/assets/style/sections/footer.css index 2e89db5c8..a473ce7b6 100644 --- a/assets/style/sections/footer.css +++ b/assets/style/sections/footer.css @@ -15,7 +15,12 @@ footer { footer * { color: #fff; - text-decoration: none; +} + +/* Footer links keep the white needed for contrast on the dark background, so + the underline is the only thing marking them as links. */ +footer a { + text-decoration: underline; } .footer-container {