[Medium]: Color Contrast: Insufficient color contrast for border of form fields.

[SumitDiyora]

Action Performed:

1. Using Chrome, open URL: staging.new.expensify.com
2. Navigate to Settings > Workspace > Reimburse expenses.
3. Navigate to the "Rate" and "Unit" form fields 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 "Rate" and "Unit" form fields has a contrast ratio of 1.2:1 with the #FFFFFF background.

Other occurrences:

Similar issue repro for PR #8017, #8226 #8253, #8832, #9046, #9138, #9118, #9170

Workaround:

Yes

Area issue was found in:

Invite new members

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.