Skip to content

Fix sidebar link color failing WCAG accessibility contrast requirements #813

@WilliamBerryiii

Description

@WilliamBerryiii

Problem

The left sidebar navigation links in the Docusaurus site use color: #e6e6e6 (light grey) for .menu__link in both light and dark themes. On the white light-mode background, this produces a contrast ratio of approximately 1.45:1 — far below the WCAG AA minimum of 4.5:1 for normal text.

Expected Behavior

Sidebar links should use colors that meet WCAG AA contrast requirements (4.5:1 minimum) in both light and dark themes.

Proposed Fix

  • Light mode: Change .menu__link color to var(--ifm-font-color-base) (#161616), yielding ~13:1 contrast against white.
  • Dark mode: Add a [data-theme='dark'] .menu__link rule preserving #e6e6e6, which provides ~12:1 contrast against the dark background (#1f1f1f).

File

docs/docusaurus/src/css/custom.css

Metadata

Metadata

Labels

accessibilityAccessibility improvements and compliancebugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions