-
Type:
Bug
-
Resolution: Fixed
-
Priority:
High
-
Component/s: Subscribers - Component Subscriptions
-
Severity 3 - Minor
-
Accessibility
Issue Summary
The links- 'Privacy Policy' and 'Terms of service' must be distinguishable without relying on color
Steps to Reproduce
1. Open Url:https://status.npmjs.org/ and sign in with valid credentials.
2. Navigate to 'Subscribe to updates' control and select it.
3. Navigate onto the mentioned links
4.Notice only color is used to distinguish the links from the surrounding text(without hovering).
5.Use any color contrast testing tool to check the contrast between the link text and the surrounding text.
6.Observe that links have a low contrast ratio with the surrounding text.
Screenshot 1
Screenshot 2
Actual Results
The links- 'Privacy Policy' and 'Terms of service' has insufficient color contrast of 1.41:1 with the surrounding text (Minimum
contrast is 3:1, link text: #0366d6, surrounding text: #44546f) and the link has no styling (such as
underline) to distinguish it from the surrounding text.As a result, users with low vision who experience low
contrast cannot detect visually that the text is intended to function as a link.
<a target="_blank" rel="noopener"
href="https://www.npmjs.com/policies/privacy">Privacy Policy</a>
Expected Results
The links- 'Privacy Policy' and 'Terms of service' should have sufficient color contrast of 3:1 with the surrounding text and styling
(such as underline) to distinguish it from the surrounding text.
Note
- Same issue reproes for similar type of links present in all tabs of the dialog
Refer this :- https://atlassian.design/components/link/examples
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.1 (23H222)
Chrome - Version 131.0.6778.265 (Official Build) (arm64)
Firefox- Version 112.0. 1
Safari- Version 18.2
JAWS- Version 2024
NVDA- Version 2024
Voiceover - Version Latest