Issue Summary

Focus indicator of "Dashboard", "Projects", "Issues" and so on buttons has an insufficient color contrast.

Steps to Reproduce

1. Open the "Home" page.
2. Navigate to the header section.
3. Navigate to the mentioned buttons.
4. Use any color contrast testing tool to check the color contrast.
5. Observe that the color contrast between the focus indicator of the buttons and the inner background color is insufficient.

Screenshot 1

Screenshot 2

Actual Results

The #2584FF focus indicator of "Dashboard", "Projects", "Issues", "Boards", "Plans", "Feedback", "Help", "Administration", and "User profile" buttons present in the header section has an insufficient color contrast ratio of 2.7:1 with #DDDFE5 inner background.
Foreground: #2584FF
Background: #DDDFE5 (inner)
Color Contrast ratio: 2.7:1 

The #2584FF focus indicator of "Create" button present in the header section has an insufficient color contrast ratio of 1.9:1 with #0B56C2 inner background.

Foreground: #2584FF
Background: #0B56C2 (inner)
Color Contrast ratio: 1.9:1 

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

Expected Results

The contrast ratio between the foreground color of focus indicator and its inner background color should be sufficient. Ensure that the color contrast of focus indicator for all user interface controls is 3:1 with the foreground and background color.

Alternatively, set the CSS outline-offset property for the mentioned button to ensure that clear focus indication is available for users.

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
Chrome - Version 131.0.6778.86 (Official Build) (arm64)
Firefox- Version 134.0 (64-bit) 
Safari- Version 18.1.1 (20619.2.8.11.12)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest