fix(a11y): active sidebar item contrast (WCAG AA)

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).
This commit is contained in:
2026-05-17 10:46:45 -07:00
parent e3b113cc2f
commit 16e14019b7

View File

@@ -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;
}