Issue Summary

On "Find an issue" page, the focus indicator for interactive elements fails color contrast ratio in safari browser. 

Note : This issue is found on "Basic" and "Advanced" mode.

Steps to Reproduce

1. Open any project. 
2. Activate "Issues" button in the header section and select "Search for issues" option.
3. Navigate through page using keyboard. 
4. Use any color contrast testing tool to check the color contrast.
5. Observe that the focus indicator for mentioned interactive elements have insufficient contrast ratio.

Screenshot

Actual Results

The "Remove", "Advanced" and so on interactive elements with foreground #8DB3FB focus indicator color have color contrast ratio of 2.1:1 with #FFFFFF outer background color.

This will make it difficult for people with low vision and color blindness to identify the focus indicator for the user interface controls that have insufficient contrast.

Expected Results

The contrast ratio between the foreground color of focus indicator and its background color should be sufficient.

Ensure that the color contrast for the foreground border color of user interface controls in hover state is 3:1 with the background color.

Workaround

Not available

Environment

MacBook Pro (16-inch, 2021)

macOS Sonoma Version 14.1

Chrome - Version 119.0.6045.159 (Official Build) (arm64)

Firefox- Version 93.0 (32-bit) Safari- Version 17.1 (19616.2.9.11.7)

JAWS- Version 2023

NVDA- Version 2020.3

Voiceover - Version Latest