Placeholder text contrast is below 4.5:1 for “Enter Your Answer” input field in Light and Dark (2026) theme:A11y_VisualStudioCode_Improved UI for MCP elicitation_Keyboard

Open
#321,135 8 comments 0 reactions 1 assignee View on GitHub

@mrleemurray is already working on this.

Since Jun 12, 2026.

Assessment

This issue has not been assessed yet.

Description

accessibility-sla bug

GitHub Tags

#A11yTCS;#Visual Studio Code Client; #SH_Integrated browser features_Win32_JUNE2026;#DesktopApp;#FTP;#Win32;#A11ySev3;#A11yMAS;#WCAG1.4.3;  #ES Chat_Deeplink; #Contrast; #SCIM:Bug5430506;

Issue Subcategory

Placeholder text insufficient contrast

User Experience

Users with low vision cannot read placeholder text that provides input hints or instructions. They may not understand what data to enter in the field.

Repro Steps

Open VS Code > Trigger an elicitation form in copilot chat > Enter your answer > Observe the issue: Placeholder text contrast is below 4.5:1 for “Enter Your Answer” input field in Light and Dark (2026) theme

Actual Result

The placeholder text “Enter Your Answer” in the input field has insufficient color contrast against its background in both Light and Dark (2026) themes. The observed contrast ratio is below 4.5:1, causing the text to appear faint and difficult to read.

Expected Result

Placeholder text should have a minimum contrast ratio of 4.5:1.

How to Fix

Increase the contrast of placeholder text via ::placeholder CSS. Better yet, use persistent visible labels above or beside the input rather than relying on placeholders alone.

Environment details

Application Name: VS Code
VS Code version: 1.124.2
Edition Windows 11 Enterprise
Version 25H2
OS build 26200.8390

Note:

  • Please do not close this bug. This bug should only be closed by TCS, C+AI Accessibility tester after bug verification.
  • Try ES Chat to learn more about the MAS rule and how to fix the issue. If you need more help, use our Teams channel or office hours.
  • "Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier."

Attachment

Image Image
Dominant language
TypeScript
Stars
193k
Forks
42.9k
PR merge metrics
PR metrics pending

Contributor guide

Open the contributing guide

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 microsoft/vscode

All issues in microsoft/vscode

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.