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:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user