Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds (.common-button-label): A11y_arcade.makecode.com_Make Code Arcade_SkillMap_AI4W

[kupatkar99]

"Please do not close this bug. This bug should only be closed by TCS, C+AI Accessibility tester after bug verification."

GitHub Tags:

#A11yTCS; #A11yWCAG; #MAS1.4.3; #CELA_P2; #A11ySev2; #WCP; #Benchmark; #FTP; #ChromiumEdge; #DesktopWeb; #BM_arcade.makecode_Web_Sept25; #Contrast(Minimum); #Win11; #Color-Contrast; #arcade.makecode.com;

Environment Details:

Application Name:  arcade.makecode.com
URL: https://arcade.makecode.com/--skillmap
Chromium Edge: Version 140.0.3485.54 (Official build) (64-bit)
OS: Windows 11 Enterprise version 25H2

Repro Steps:

1. Launch the URL: https://arcade.makecode.com/--skillmap and open it.
2. MakeCode SkillMap page will get open.
3. Run Accessibility insights for Web.
4. Observe the issue.

Issue:

Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds (color-contrast - https://accessibilityinsights.io/info-examples/web/color-contrast)

Target application:

MakeCode Skillmap - https://arcade.makecode.com/--skillmap

Element path:

.primary > .common-button-flex > .common-button-label

Snippet:

Sign in to Save

How to fix:

Fix any of the following:
Element has insufficient color contrast of 3.01 (foreground color: #f76820, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1

Environment: Microsoft Edge version 141.0.0.0

====

This accessibility issue was found using Accessibility Insights for Web 2.46.0 (axe-core 4.10.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Attachment: