Issue Summary

The color alone is used to identify the selected state of the “Theme“ sort buttons of the columns in the table.

Steps to Reproduce

1. Open the "Header" page.
2. Navigate to the "User profile" and activate it.
3. Navigate to the "Themes" button and activate it.
4. Observe that only color is used to identify the selected state.

Screenshot

Actual Results

When the user navigates through the Themes such as “Light“, "Dark", "Match system" and "Original", the selected state or the change of action is been identified using the #ECEDF0 background color of the buttons.

Color deficiency users and screen reader users will not be able to differentiate between the colors and will have no way to easily identify the activated buttons.

Expected Results

Information presented via color should be conveyed to all users programmatically using another alternate method.

In the mentioned example along with color, use additional visual cues such as underlining, bold, patterns, and so on to convey the state of the buttons.

Workaround

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

Environment

MacBook Pro (16-inch, 2021)
macOs Sonoma 14.3.1
Chrome - Version 120.0.6099.109 (Official Build) (arm64)
Firefox- Version 92.0 (64-bit) 
Safari- Version 17.3 (19617.2.4.11.8)
JAWS- Version 2023
NVDA- Version 2021.2 
Voiceover - Version Latest