Accent blue fails 4.5:1 for button, badge and link text in both modes; status bar debugging state is 1.54:1 in light

Open
#21 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
Half a day
Newbie friendliness
30/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
vscode

Research direction

The issue names the tokens accent.primary, statusBar.debuggingForeground, and the input and dropdown border colours, but no source file, so start by finding where the OKLCH palette and these theme colour keys are defined in the repository. The proposed values are a design decision the issue itself says needs the maintainers' call, so confirm the direction before editing. Done means the listed text pairs reach 4.5:1 and the borders reach 3:1 against the stated backgrounds, in both light and dark modes.

Written by the indexing model from the issue text.

Description

accessibility

accent.primary (blue 500 light, blue 600 dark) is used for fills, links, the cursor and focus. As text/background pairs: button and activity badge text 4.21:1 (light) and 3.44:1 (dark); links 4.21 and 3.44; statusBar.debuggingForeground is white on yellow 500 at 1.54:1 in light. Input and dropdown borders are 1.63:1 (light) and 1.32:1 (dark) against the editor; the border is the only cue for the field (WCAG 1.4.11 asks 3:1). Git decorations on the side bar: added/untracked 2.45, conflicting 1.34 (light).

Proposal: split the accent into fill and text roles (blue 600 text in light, blue 400 in dark), set statusBar.debuggingForeground to the dark editor colour, and use gray 500 (light) / gray 600 (dark) for input and dropdown borders. This changes the look of buttons and the status bar, so it wants the maintainers' call.

🤖 Generated with Claude Code

Dominant language
TypeScript
Stars
7
Forks
2
Avg merge
3h 2m
Merged PRs (30d)
6

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from twbs/bootstrap-vscode-theme

All issues in twbs/bootstrap-vscode-theme

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.