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

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.
4. 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 "Write something..." input field has a contrast ratio of 1.2:1 with the #FFFFFF background.

Other Occurrences:
Similar issue repro on PRs #8195, #8117, #8340, #8443, #8521, #8585, #8672, #8694, #8634, #8828, #8844, #9082, #9094, #9132, #9095, #9206, #9022, #9203, #9284, #8299, #9276, #9284, #8569, #9031
Similar issue repro on PRs #9534 for search text field in emoji popup.

Workaround:

Yes

Area issue was found in:

Chat room

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