Issue Summary

 Color alone is used to distinguish link such as "Learn more" from the surrounding text.

Steps to Reproduce

1. Open the "Refine Issues Displayed" page.
2. With the help of CCA check the color contrast ratio of mentioned link text with the adjacent text.

Screenshot

Actual Results

When checking the color contrast analyzer tool, the color contrast of the link such as “Learn more” with surrounding text is failing with the following details →

• Foreground : #0052CC Background : #6B778C and Ratio : 1.5: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 underlining for link text even when the keyboard focus is not on the interactive element. This will make sure that users can differentiate between links and text.

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

Code snippet

text-decoration: underline; 

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