From 16e14019b7a3200167d51e57879c434acd588f30 Mon Sep 17 00:00:00 2001 From: Josh Date: Sun, 17 May 2026 10:46:45 -0700 Subject: [PATCH] fix(a11y): active sidebar item contrast (WCAG AA) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Starlight's default uses --sl-color-text-accent (our teal #00d4aa) as the active-item background, which gives ~3:1 contrast vs the dark inverted text — under WCAG AA (4.5:1). Override with primary blue + white text for ~9:1. Note: customCss loads before Starlight's component CSS, so the rule needs (0,2,1) specificity to win against Starlight's scoped (0,2,0). --- src/styles/anhh-tokens.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/src/styles/anhh-tokens.css b/src/styles/anhh-tokens.css index ff91dee..1fe433c 100644 --- a/src/styles/anhh-tokens.css +++ b/src/styles/anhh-tokens.css @@ -83,3 +83,24 @@ body { line-height: 1.6; } + +/* + * Active sidebar item — Starlight default uses --sl-color-text-accent as the + * background, which on our teal (#00d4aa) gave only ~3:1 contrast against the + * dark gray text. Override with our primary blue + white text so contrast + * exceeds WCAG AA in both modes. + * + * Starlight scopes its rules via Astro's data-astro-cid-* attributes, so we + * need at least matching specificity. `:is(html)` adds a class-equivalent. + */ +/* + * Specificity bump: customCss loads BEFORE Starlight's component-scoped CSS, + * and Starlight's rule has specificity (0,2,0) via its scoped class. We use + * a doubled attribute selector + html prefix for (0,2,1) to override. + */ +html [aria-current='page'][aria-current='page'], +html [aria-current='page'][aria-current='page']:hover, +html [aria-current='page'][aria-current='page']:focus { + background-color: var(--anhh-primary); + color: #ffffff; +}