Issue Summary

Color alone is used to distinguish links such as "SCRUM", "SCRUM-1", and "SCRUM-3" from the surrounding text.

NOTE : A similar issue is observed on the page, that becomes available by selecting the “Team” option from the "Rollup to" expand/collapse button - Refer to screenshot 3

Steps to Reproduce

1. Open the "Accessibility Assessment - Dependencies Report" page.
2. Navigate and activate the "Blocks" button.
3. Observe that a non-modal dialog appears on the page.
4. Navigate to the mentioned instance.
5. With the help of CCA check the color contrast ratio of mentioned link text with the adjacent text.

Screenshot 1

Screenshot 2

Screenshot 3

Actual Results

When checking the color contrast analyzer tool, the color contrast of the links such as "SCRUM", "SCRUM-1", and "SCRUM-3"  with surrounding text is failing with the following details →

• Foreground : #0052CC Background : #081F42 and Ratio : 2.4:1

As a result, users who cannot distinguish between the colors would have difficulty reading through the content.

Expected Results

Ensure all links that appear in blocks of text have a color contrast difference of at least 3:1 with the surrounding text to ensure that users who cannot distinguish between the colors can still find the link.

Increase the color contrast of link text to achieve a ratio of 3:1 which will help in fixing this issue.

Make sure to provide an underline for link text even when the keyboard focus is not on the interactive element. This will make sure that users can differentiate between the link and the text.

A color contrast analyzer can be downloaded from Color Contrast Checker - TPGi

Workaround

Currently, there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (13-inch, 2018)
macOs Ventura 13.3.1
Chrome - Version 109.0.5414.119 (Official Build) (64-bit)
Firefox- Version 92.0 (64-bit)
Safari- Version 16.4 (18615.1.26.110.1)
JAWS- Version 2022
NVDA- Version 2021.2
Voiceover - Version Latest