Skip to content

Insufficient color contrast for keyboard focus indicator on toggle buttons in Project Settings dialog (1.123:1):A11y_Microsoft MakeCode_Project Settings_Non-text Contrast #6833

@kupatkar99

Description

@kupatkar99

"Leveraging SWE Agent can help accelerate this accessibility bug fix; review and validate all AI generated changes before merge."

"Check out Accessibility Insights! - Identify accessibility bugs before check-in and make bug fixing faster and easier."

"Contact CAI Accessibility Support Channel for Accessibility queries on design, development, test, usability or any processes"

Please do not close this bug. This bug should only be closed by Trusted Tester after verification.

GitHub Tags:

#A11yTCS; #A11yMAS; #Win11; #DesktopWeb; #Microsoft MakeCode; #E2E_MicrosoftMakeCode_Web_May2026; #FTP; #ChromiumEdge; #Non-text Contrast; #A11ySev2; #WCAG1.4.11; #AILimited; #copilot:agent=a11yagent;

Environment Details:

Application Name: Microsoft MakeCode
URL: https://makecode.microbit.org/beta
windows Edition: Windows 11 Enterprise Insider Preview(24H2)
OS Build: 26544.1000

Repro Steps:

  1. Launch application URL : https://makecode.microbit.org
  2. Home page will open.
  3. Tab to "New Project" option and press enter key. Editor screen will open.
  4. Tab to "Settings" option appearing in header section and press enter key
  5. Tab to "Project Settings" option and press enter key. project Settings dialog will open.
  6. Tab to toggle buttons.
  7. Observe the issue.

Actual:

The keyboard focus indicator on toggle buttons within the Project Settings dialog has a contrast ratio of 1.123:1 against its background, which is below the required minimum of 3:1.

Expected result:

The keyboard focus indicator should have a minimum contrast ratio of 3:1 against adjacent background colors, ensuring it is clearly visible when navigating using the keyboard.

User impact:

Keyboard users may have difficulty clearly identifying which toggle button is focused. Low vision users could find it challenging to perceive the focus state, which can cause navigation issues and errors. Users who depend on visible focus indicators might lose their place within the dialog, affecting their ability to complete tasks.

Attachment:

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions