fix(a11y): increase sidebar text contrast to meet WCAG AA accessibility

[anusha-c18]

Closes #5818

📝 Description

This PR fixes a low-contrast accessibility issue in the On this page side navigation of HeroUI docs.
Inactive sidebar link text previously had insufficient contrast against dark backgrounds, failing WCAG 2.1 Level AA requirements.
The colour has been updated to provide a compliant contrast ratio for improved readability and accessibility.

⛳️ Current behavior (updates)

Non-active (unselected) links use the light gray (hsl(--heroui-default-300) colour, resulting in a contrast ratio of ~2.6:1 against the dark background, which fails WCAG 2.1 Level AA accessibility standards for normal text.

🚀 New behavior

Updated the colour to text-default-500 for both light and dark modes, resulting in a contrast ratio of 7.8 : 1, meeting WCAG 2.1 AA guidelines for normal text.

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

Before:

After

Summary by CodeRabbit

• Style
  • Adjusted the dark mode styling of the documentation table of contents.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 13f50db

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@anusha-c18 is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Removed the dark mode text color utility class "dark:text-default-300" from the table of contents component styling to improve color contrast compliance with WCAG AA accessibility standards for inactive navigation items.

Changes

Cohort / File(s)	Change Summary
Dark Mode Text Color Removal apps/docs/components/docs/toc.tsx	Removed the "dark:text-default-300" class from TOC list item styling to address insufficient contrast ratio in dark mode

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2 minutes

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly describes the accessibility fix by indicating an increase in sidebar text contrast to meet WCAG AA guidelines, clearly capturing the main change in this pull request.
Linked Issues Check	✅ Passed	The change updates inactive sidebar link styles to use text-default-500 in both light and dark modes, increasing the contrast ratio to 7.8:1 and thus fully addressing the primary coding objectives of issue #5818 to meet WCAG 2.1 Level AA requirements.
Out of Scope Changes Check	✅ Passed	The pull request only removes and adjusts the text color class for the sidebar navigation items without introducing unrelated logic or modifications, ensuring that there are no out-of-scope changes.
Description Check	✅ Passed	The pull request description adheres to the repository template by closing the related issue, providing a clear description, outlining the current and new behaviors, indicating breaking change status, and including additional information with screenshots, fulfilling all required sections.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/docs/components/docs/toc.tsx (1)

93-94: Consider removing redundant dark mode class.

Line 94's dark:data-[active=true]:text-foreground is redundant since line 93 already applies text-foreground to active items regardless of mode.

Apply this diff to remove the redundancy:

     "data-[active=true]:text-foreground",
-    "dark:data-[active=true]:text-foreground",
     "before:content-['']",

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3737870 and 13f50db.

📒 Files selected for processing (1)

• apps/docs/components/docs/toc.tsx (1 hunks)

🔇 Additional comments (2)

apps/docs/components/docs/toc.tsx (2)

92-92: Excellent accessibility fix!

Removing dark:text-default-300 and relying on text-default-500 for both light and dark modes is the correct approach to meet WCAG AA contrast requirements. The reported 7.8:1 contrast ratio significantly exceeds the 4.5:1 minimum for normal text.

---

120-120: Verify dark mode contrast for “Back to top” link
The dark:text-foreground/30 opacity may fall below the 4.5:1 WCAG AA threshold against the TOC background. Confirm it meets contrast requirements using your actual theme values. Also scan for other low-opacity dark-mode text, for example:

rg -n 'dark:text-foreground/[0-9]+' apps/docs/
rg -n 'dark:text-default-300'   apps/docs/

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Oct 17, 2025 2:49am
heroui-sb	Ready	Preview	Comment	Oct 17, 2025 2:49am

[pkg-pr-new]

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5819

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5819

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5819

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5819

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5819

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5819

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5819

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5819

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5819

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5819

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5819

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5819

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5819

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5819

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5819

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5819

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5819

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5819

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5819

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5819

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5819

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5819

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5819

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5819

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5819

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5819

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5819

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5819

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5819

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5819

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5819

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5819

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5819

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5819

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5819

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5819

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5819

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5819

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5819

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5819

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5819

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5819

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5819

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5819

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5819

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5819

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5819

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5819

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5819

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5819

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5819

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5819

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5819

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5819

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5819

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5819

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5819

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5819

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5819

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5819

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5819

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5819

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5819

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5819

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5819

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5819

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5819

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5819

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5819

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5819

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5819

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5819

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5819

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5819

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5819

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5819

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5819

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5819

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5819

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5819

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5819

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5819

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5819

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5819

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5819

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5819

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5819

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5819

commit: 13f50db