microsoft
[Programmatic Access - Make code - Home page]: Luminosity ratio of the "View all" button does not meet minimum contrast ratio 4.5:1
User Experience:
Color sensitive and low vision users who rely on keyboard for navigation will get impacted if the luminosity ratio of the control does not meet minimum contrast ratio with respective to surrounding text and will face difficulties while interacting with the controls.
Note: User credentials should NOT be included in the bug.
Repro Steps:
- Open URL: https://arcade.makecode.com/ with valid credentials.
- Run Accessibility Insights tool.
- Navigate the page with keyboard tab key.
- Verify whether Luminosity ratio of the "View all" button does meet minimum contrast ratio of 4.5:1 or not.
Actual Result:
Luminosity ratio of the "View all" button does not meet minimum contrast ratio 4.5:1. Observation: The actual luminosity ratio of the 'View all' button is 2.4:1 which is less than the required ratio 4.5:1.
Expected Result:
Luminosity ratio of the "View all" button should be greater than or equal to 4.5:1.
Note: The same issue exists with the 4 other URL: Accessibility Insights automated checks result (trafficmanager.net)
Title: WCAG 1.4.3: Ensures the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds (.view-all-button) Tags: Accessibility, WCAG 1.4.3, color-contrast
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: Microsoft MakeCode Arcade - https://arcade.makecode.com/
Element path: .view-all-button
Snippet:
How to fix: Fix any of the following: Element has insufficient color contrast of 2.74 (foreground color: #f76820, background color: #fef3e0, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1
Environment: Chrome version 121.0.0.0
====
This accessibility issue was found using Accessibility Insights for Web 2.41.0 (axe-core 4.7.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.
How to fix: Fix any of the following: Element has insufficient color contrast of 2.74 (foreground color: #f76820, background color: #fef3e0, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1
Environment: Chrome version 121.0.0.0
====
This accessibility issue was found using Accessibility Insights for Web 2.41.0 (axe-core 4.7.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.
#Accessibility;#A11yMAS;#A11ySev2;#A11yAuto;#K4W;#HCL;#E2E-HCL-MakeCode-Jan2024;#Benchmark;#Win11-Chrome;#MAS1.4.3;#WCP
As checked the issue on URL: https://makecode.microbit.org/. The issue is still repro and severity is fine. #Regressed:04-08-24;InternalReviewed-Apr2024
