Description
Note: Same issue is observed wherever the similar buttons are present throughout the application.
Other Instances:
Other instance 1: Collect tab
Path: Retrospective page--> collect tab
Issue: Luminosity contrast ratio of "Separators" is less than the minimum required ratio of 3:1, it is 1.6:1
Ensure that: Luminosity contrast ratio should be greater than or equal to 3:1
Note: Same issue reproes throughout the application, wherever similar controls are present.
Impact on a Person with Disability (PWD):
Low vision or color sensitive users are facing difficulty as Luminosity contrast ratio of tab controls is less than the minimum required ratio of 3:1
Test Environment:
OS: Windows 11 [Version 23H2 (OS Build 22631.2715)]
Browser: Edge Version (119.0.2151.97), Chrome Version (119.0.6045.200)
URL: Work items - Boards (visualstudio.com)
Tools: Color Contrast Analyzer
Pre-requisites:
Turn on Color Contrast Analyzer
Repro Steps:
Step 1: Open MCAPS ADO in Edge/Chrome browser.
Step 2: Navigate to 'Retrospective' in left navigation and invoke it.
Step 3: Navigate to the collect tab and invoke it.
Step 4: Verify whether luminosity contrast ratio of tab controls is less than the minimum required ratio of 3:1 or not.
Actual Result:
Luminosity contrast ratio of "board, History, Collect, Group, Vote, Act" tabs is less than required ratio 3:1.
Observation: For unselected tab, it is 1.1:1, for selected tab, it is 1.2:1
Expected Result:
Luminosity contrast ratio of "board, History, Collect, Group, Vote, Act" tabs should be greater than or equal to the minimum required ratio 3:1.
How to Fix/Suggestive Fix:
When designing your site, try to be mindful of adjacent colors and those used to establish visual boundaries of controls, such as buttons, inputs, checkboxes, and radio buttons. This includes on focus indicators.
This criteria can be easily solved manually as well, if you ensure that your default link and essential graphic styles observe a 3:1 contrast ratio. Use this contrast tool to check your ratio.
Adjust the background color of tab controls to meet the required ratio '3:1'.
MAS Reference:
MAS 1.4.11 – Non-text Contrast
WCAG Reference:
Understanding Success Criterion 1.4.11: Non-text Contrast (w3.org)
AzDO Reference Link:
https://worldwidelearning.visualstudio.com/MCAPS%20Accessibility/_workitems/edit/1713064