Skip to content

themes: improve quick pick focus contrast in 2026 themes#313740

Merged
hawkticehurst merged 1 commit intomainfrom
agents/fix-a11y-bug-2026-themes
May 1, 2026
Merged

themes: improve quick pick focus contrast in 2026 themes#313740
hawkticehurst merged 1 commit intomainfrom
agents/fix-a11y-bug-2026-themes

Conversation

@hawkticehurst
Copy link
Copy Markdown
Member

@hawkticehurst hawkticehurst commented May 1, 2026

Fixes #307581.

Summary

This updates the focused quick pick row colors in the 2026 Light and 2026 Dark themes so they meet the 3:1 non-text contrast requirement against quickInput.background.

  • update quickInputList.focusBackground in both 2026 themes to stronger accent colors
  • switch quickInputList.focusForeground and quickInputList.focusIconForeground to white so the focused row remains legible
Screenshot 2026-05-01 at 11 41 19 AM Screenshot 2026-05-01 at 11 42 42 AM

Why

The existing low-alpha focus background tints blend into the quick input surface, which makes the keyboard focus indicator too subtle in quick pick rows.

Update the 2026 Light and 2026 Dark quick input focused row colors to meet non-text contrast requirements against the quick input background.

Also switch the focused row foreground and icon foreground to white so the stronger focus background remains legible.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI review requested due to automatic review settings May 1, 2026 15:44
@hawkticehurst hawkticehurst requested a review from meganrogge May 1, 2026 15:45
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Updates the 2026 Light/Dark default themes’ Quick Pick focused row colors to improve keyboard focus indicator visibility and meet the WCAG 1.4.11 (non-text contrast) 3:1 requirement against quickInput.background.

Changes:

  • Strengthen quickInputList.focusBackground in 2026 Light and 2026 Dark.
  • Set quickInputList.focusForeground and quickInputList.focusIconForeground to white for legibility on the stronger focus background.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File Description
extensions/theme-defaults/themes/2026-light.json Uses a solid accent focus background and white focused-row text/icon colors for improved contrast in the Quick Pick.
extensions/theme-defaults/themes/2026-dark.json Uses a stronger accent focus background and white focused-row text/icon colors to improve focused-row visibility on dark quick input surfaces.

@meganrogge meganrogge self-assigned this May 1, 2026
@meganrogge meganrogge added this to the 1.119.0 milestone May 1, 2026
@hawkticehurst hawkticehurst merged commit 1309e80 into main May 1, 2026
30 checks passed
@hawkticehurst hawkticehurst deleted the agents/fix-a11y-bug-2026-themes branch May 1, 2026 16:03
hawkticehurst added a commit that referenced this pull request May 4, 2026
… themes) (#314117)

* themes: fix match highlight contrast in focused quick pick rows

Add list.focusHighlightForeground: #FFFFFF to the 2026 Dark and 2026
Light themes so search match highlights remain legible against the
saturated blue focused row background introduced in #313740.

The original list.highlightForeground (blue) is preserved for unfocused
rows, retaining the prior accessibility fix.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

* Use quick-pick-specific token for focused match highlights

Address review: instead of overriding the global `list.focusHighlightForeground`
(which would impact all lists/trees in the workbench, including those with
light tinted focus backgrounds in 2026 Light), introduce a new
`quickInputList.focusHighlightForeground` color token scoped to the
quick pick. Update quickInput.css to use the new token and set it to
white in the 2026 Dark and 2026 Light themes.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

---------

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
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.

Keyboard focus indicator color contrast is less than 3:1:A11y_VisualStudioCode_Non text Contrast

3 participants