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 {
|
body {
|
||||||
line-height: 1.6;
|
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