Skip to content

Commit aa5b4bb

Browse files
WilliamBerryiiiBill Berry
andauthored
fix(docs): update sidebar link color to meet WCAG AA contrast requirements (#814)
## Summary Fixes the left sidebar navigation link color that fails WCAG AA accessibility contrast requirements. ## Problem The `.menu__link` rule in the Docusaurus custom CSS used `color: #e6e6e6` (light grey) for both light and dark themes. On the white light-mode background (`#ffffff`), this produces a contrast ratio of ~1.45:1 — far below the WCAG AA minimum of 4.5:1 for normal text. ## Changes - **Light mode**: Changed `.menu__link` color from `#e6e6e6` to `var(--ifm-font-color-base)` (`#161616`), yielding ~13:1 contrast ratio against white — exceeds WCAG AAA (7:1). - **Dark mode**: Added `[data-theme='dark'] .menu__link` rule preserving `#e6e6e6`, which provides ~12:1 contrast against the dark background (`#1f1f1f`). ## File Changed - `docs/docusaurus/src/css/custom.css` Fixes #813 Co-authored-by: Bill Berry <wbery@microsoft.com>
1 parent a7bb856 commit aa5b4bb

File tree

1 file changed

+5
-1
lines changed

1 file changed

+5
-1
lines changed

docs/docusaurus/src/css/custom.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -191,7 +191,7 @@ a:visited {
191191
font-weight: 400;
192192
line-height: 25.6px;
193193
padding: 2px 0 2px 16px;
194-
color: #e6e6e6;
194+
color: var(--ifm-font-color-base);
195195
}
196196

197197
.menu__link:hover {
@@ -208,6 +208,10 @@ a:visited {
208208
background-color: var(--ms-learn-section-bg);
209209
}
210210

211+
[data-theme='dark'] .menu__link {
212+
color: #e6e6e6;
213+
}
214+
211215
.menu__list-item-collapsible > .menu__link {
212216
font-weight: 400;
213217
}

0 commit comments

Comments
 (0)