Skip to content

Complete section self-link contrast fix in dark mode - #5410

Draft
marcoscaceres with Copilot wants to merge 2 commits into
mainfrom
copilot/fix-accessibility-section-icon-contrast
Draft

Complete section self-link contrast fix in dark mode#5410
marcoscaceres with Copilot wants to merge 2 commits into
mainfrom
copilot/fix-accessibility-section-icon-contrast

Conversation

Copilot AI commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

Accessibility reports flagged insufficient contrast for the § section self-link icon; while the light-theme opacity update was already handled, dark mode still rendered some section icons effectively invisible. This change closes that remaining dark-mode contrast gap without altering existing light-mode behavior.

  • Dark-mode self-link color override

    • Added dark-mode CSS overrides for h4/h5/h6 self-link glyphs so they no longer use hardcoded black on dark backgrounds.
    • In dark contexts (prefers-color-scheme: dark and ReSpec’s explicit dark toggle), the icon now uses var(--heading-text).
  • Coverage in style unit test

    • Extended the existing core style unit test to assert both dark-mode rules are present in injected ReSpec CSS, preventing regression.
@media (prefers-color-scheme: dark) {
  :is(h4, h5, h6) + a.self-link::before {
    color: var(--heading-text);
  }
}

body:has(input[name='color-scheme'][value='dark']:checked)
  :is(h4, h5, h6) + a.self-link::before {
  color: var(--heading-text);
}

Copilot AI changed the title [WIP] Fix insufficient contrast for section icon Complete section self-link contrast fix in dark mode Aug 21, 2026
Copilot AI requested a review from marcoscaceres August 21, 2026 07:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Accessibility improvement : section icon has insufficient contrast

2 participants