-
Bug
-
Resolution: Unresolved
-
Low
-
None
-
9.5.1
-
Severity 3 - Minor
-
Issue Summary
Focus indicator of the "Create project" link has an insufficient color contrast.
Steps to Reproduce
- Open the home page.
- Activate the "Projects" link in the header section.
- Using a keyboard 'Tab' key, navigate to the mentioned "Create project" link.
- Use any color contrast testing tool to check the color contrast.
- Observe that the focus indicators of the mentioned link has an insufficient color contrast.
Screenshot
Actual Results
The #388BFF focus indicator of "Create project" link in the main content area has an insufficient color contrast ratio of 2.5:1 with #DDDFE5 inner background.
Foreground: #388BFF
Background: #DDDFE5 (inner)
Contrast ratio: 2.5:1
This will make it difficult for the people with low vision and color blindness to identify the focus indicator for the mentioned interactive elements that has insufficient color contrast.
Expected Results
The contrast ratio between the foreground color of the focus indicator and its background color should be sufficient. Ensure that the color contrast ratio of the focus indicator for all user interface controls is 3:1 with the foreground and background color.
Alternatively, set the CSS outline-offset property for the mentioned interactive elements to ensure that clear focus indication is available for users.
Workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available.
Environment
MacBook Pro (16-inch, 2021)
macOs Sonoma 14.7
Chrome - Version 131.0.6778.86 (Official Build) (arm64)
Firefox- Version 134.0 (64-bit)
Safari- Version 18.1.1 (20619.2.8.11.12)
JAWS- Version 2023
NVDA- Version 2021.2
Voiceover - Version Latest
