Issue Summary

On the “Announcement banner” page, link such as "markdown syntax" fails the minimum color contrast requirement of 3:1 with their adjacent text

Steps to Reproduce

1. Navigate to the header section.
2. Navigate to the “Administration | Announcement banner” link & activate it.
3. 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 text with surrounding text is failing with the following details →

Foreground : #0053CC, Background : #6B7784c and Ratio : 1.5:1

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

Expected Results

To make it easy for all users to recognize links the best practice is to persistently underline them or provide any other visual cue such as formatting the text as bold or italic. If the above solution is not feasible, change the color of links so that they have a contrast ratio of at least 3:1 with the surrounding text.

Moreover, it is best practice to ensure that the underline appears not only when the mouse is hovered over the links but also when the links receive the keyboard focus.

Workaround

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

Environment

MacBook Pro (16-inch, 2019)
macOs Ventura 13.6
Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
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