Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds.: A11y_MonacoEditor_AI4W

[PoojaNamde]

GitHubTags:

#A11yTCS; #A11ySev2; #A11yMAS; #WCAG1.4.3; #Desktopweb; #Win11; #Visual Studio Code Services; #VisualStudioCodeServices-Web-Dec2024; #a11y-monacoeditor; #AI4W; #A11yAuto;

Environment Details:

#URL: Monaco Editor (microsoft.github.io)
Application name: Monaco Editor
Browser: Chromium Edge Version 132.0.2945.0 (Official build) dev (64-bit)
Windows 11 Enterprise (Version 23H2)  
OS build: 22631.4169

Repro Steps:

1. Hit the URL: https://microsoft.github.io/monaco-editor/playground.html?source=v0.40.0-dev.20230707#XQAAAAJzAQAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscwzfibW_1uhs0-3YGTBOsVJ4S4FwfCDQb5-2uUHXTVAefbVSd9IzaZ_vv9VR9KugsKimARHSWlrTPOQHROITHxmAetfeRrm3VHdSe7_Etv6WpgzlH4vE8EOD3EPhJDl6tDpOO8RxKZbUytKns3T0NFFloo9Q21KsEBT298I6cyZc5-Glup9UHU6QTpv2Hjab6pZzB3ZO2RH-WGhzXse2-hNlgz6zCgsG8AjiqGg0ZzWzND7z09NmCQOQd6pfkNvO2zmMzFvHpTY8RFEy1urlQcQMb1HHLEESBi8m3Rr3UzFlKzY51hfYcz__QCePc.
2. TAB to Monaco editor.
3. Run Automated checks from Accessibility Insights for Web tool.
4. Observe the issue

Issue:

Ensures 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:

Monaco Editor - https://microsoft.github.io/monaco-editor/playground.html?source=v0.40.0-dev.20230707#XQAAAAJzAQAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscwzfibW_1uhs0-3YGTBOsVJ4S4FwfCDQb5-2uUHXTVAefbVSd9IzaZ_vv9VR9KugsKimARHSWlrTPOQHROITHxmAetfeRrm3VHdSe7_Etv6WpgzlH4vE8EOD3EPhJDl6tDpOO8RxKZbUytKns3T0NFFloo9Q21KsEBT298I6cyZc5-Glup9UHU6QTpv2Hjab6pZzB3ZO2RH-WGhzXse2-hNlgz6zCgsG8AjiqGg0ZzWzND7z09NmCQOQd6pfkNvO2zmMzFvHpTY8RFEy1urlQcQMb1HHLEESBi8m3Rr3UzFlKzY51hfYcz__QCePc

Element path:

.mtk4:nth-child(4)

Snippet:

id

Related paths:

div[data-uri="inmemory://model/2"] > .overflow-guard[data-mprt="3"] > .editor-scrollable.vs[data-mprt="6"] > .lines-content.monaco-editor-background

How to fix:

Fix any of the following:
Element has insufficient color contrast of 3.99 (foreground color: #ff0000, background color: #fffffe, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1

Environment:

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

Attachment: