[Medium]: Color Contrast: Insufficient color contrast for border of input field.

[SumitDiyora]

Action Performed:

1. Using Chrome, open URL: staging.new.expensify.com
2. Navigate to Any 'chat room'.
3. Navigate to the "Write something..." input field using the Tab key and activate the "Emoji" button.
4. Navigate to the "Search" input field using the Tab key.
5. Observe that the analyser reports that the contrast ratio is not sufficient.

Expected Result:

The border of the input field should have a contrast ratio against the page background of 3:1 or greater.

Actual Result:

Background/foreground color combinations with an insufficient contrast ratio was found on the screen. For instance, the #ECECEC border of the "Search" input field has a contrast ratio of 1.2:1 with the #FFFFFF background.

Other Occurrences:
Similar type of issues repro on PR #8039, #9147, #8928, #9180, #9343

Similar type of issues repro on PR #7702 for the "search" field.

Workaround:

Yes

Area issue was found in:

Emoji

Failed WCAG checkpoints

1.4.11

User impact:

When sufficient contrast ratios are not met, users with low vision may have trouble identifying user interface components.

Suggested resolution:

Ensure that the color contrast for all user interface controls in their default as well as active, hover and focus states is 3:1 with the adjacent content.

Platform:

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.49-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Reference link: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
Issue reported by: Sumit

[melvin-bot]

@SumitDiyora, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.