[A11y] - State of active component lacks 3 to 1 contrast ratio

[VaniChinnam]

Current Behaviour

The state of an ACTIVE user interface component does not have at least a 3 to 1 luminosity contrast ratio with either the inner or outer adjacent background.

---

Expected Behaviour

RULE : The visual state of an active user interface component MUST have sufficient contrast of 3 to 1 with the adjacent background. Exceptions exist. HOW TO FIX: Fix this issue by adjusting the visual focus indicator or state indicator (e.g. selected, checked, pressed, etc.) of the user interface component and/or background to increase the contrast with either the inner or outer adjacent background to at least 3 to 1.

---

Impact

• [ ] Blocker
• [x] Serious
• [ ] Critical
• [ ] Moderate
• [ ] Minor

Issue Details

View Issue 1512960

Auditor ID : 1512960

description : -You must choose from one of the following options: Combo box -What is your favorite color? combo box

Element location: Below the "Required" and "Error" heading

Dark theme color code: Focus indicator color code: #5F3445 Outer background-color: #333641 Contrast ratio: 1.2:1

Light Theme color code: Focus indicator color code: #F3C0CA Background color code: #FEFDFE Contrast ratio: 1.6:1

Page Name : Select

source : <select id="x_58_2689" required=""><option class="Field__option" value="">Please choose</option><option class="Field__option" value="Yes">Yes</option><option class="Field__option" value="No">No</option></select>

Screenshots : [Light theme](https://axeauditor.dequecloud.com/api/v1/file/5081619a-5d17-11ee-b096-9fa9f304f1fe State of active component lacks 3 to 1 contrast ratio: https://axeauditor.dequecloud.com/api/v1/file/50824d76-5d17-11ee-981b-3f5eafa44676)

[scurker]

This may be addressed with #1006