GitHub Tags:

#A11yTCS; #A11yMAS; #A11ySev3; #DesktopWeb; #ChromiumEdge; #Win11; #Visual Studio Code Services; #E2E_Visual Studio Code Services_Web_Jan26; #WCAG1.4.3; #Contrast (Minimum); #WCP; #P1_WCP; #Color-Contrast; #a11ydb-near-miss-contrast;

Repro Steps:

Launch the URL: https://code.visualstudio.com/docs/cpp/config-clang-mac > 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)

Similar issue also observed in below Urls:

1. https://code.visualstudio.com/updates/v1_68
2. https://code.visualstudio.com/updates/v1_69
3. https://code.visualstudio.com/docs/configure/keybindings
4. https://code.visualstudio.com/docs/configure/command-line

Target application:

Using Clang in Visual Studio Code - https://code.visualstudio.com/docs/cpp/config-clang-mac

Element path:

.line:nth-child(4) > span:nth-child(6)

Snippet:

"\n

Related paths:

.code-block-wrapper:nth-child(106) > pre[data-lang="json"][aria-label="Code block in JSON"]

How to fix:

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

Environment:

Microsoft Edge version 153.0.0.0

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

Environment Details:

Application Name: code.visualstudio.com
URL: https://code.visualstudio.com/docs/cpp/config-clang-mac
Chromium Edge: Version 153.0.4234.48 (Official build) (64-bit)
OS: Windows 11 Enterprise Insider Preview 24H2

Attachment: