Select: State of active component lacks 3 to 1 contrast ratio

[scurker]

Original Auditor URL: https://axeauditor.dequecloud.com/test-run/f6620faa-6d1e-11ec-a0b7-97f3ccf70959/issue/e4b43df8-80c6-11ec-a52d-8f9c4ce20ffc?sortField=identifier&sortDir=asc&page=0&activeTab=dt-issue&pageSize=50&viewMode=issues&row=11&issuesCount%5B0%5D=&issuesCount%5B1%5D=&filter%5Bgroup_id%5D%5B0%5D=42b8f3a2-ac6e-11ed-adb1-3bfa602e0928&filter%5Bgroup_id%5D%5B1%5D=df2b20c0-1317-11ed-acb1-c7cbc98656eb

URL: https://cauldron.dequelabs.com/components/Select

Description

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.
In Dark/Light mode both. The color contrast of the focus indicator lacks a 3 to 1 contrast ratio.

Element 1: With error? Baz? (light theme)
Focused state color: #F4C5CE
Adjacent color: #FFFFFF
Color contrast ratio is 1.5:1

Element 2: With error? Baz? (dark theme)
Focused state color: #5A3545
Adjacent color: #283640
Color contrast ratio is 1.2:1

Recommendation to fix

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.

REFERENCE:

WCAG Understanding document: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast

BACKGROUND:

People who have low vision or are colorblind may have difficulty perceiving that an element is interactive or what its state is - e.g. whether it has keyboard focus, is selected/checked/pressed, etc. - if the contrast between the element boundaries and/or state indicators and its background or adjacent colors is insufficient. When an interactive element's visual boundaries and state indicators have adequate contrast, people who have low vision or are colorblind are more likely to be able to perceive which elements on the screen are interactive and what their current state is.

[scurker]

This needs to match what's currently in the uxpin.

[scurker]

This should be fixed with #1006

[scurker]

Duplicate of #1394