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

Action Performed:

1. Using Chrome, open URL: staging.new.expensify.com
2. Navigate to Settings > Workspace > Manage members > Invite
3. Navigate to the "Name, email, or phone number" and "Add a personal message (optional)" 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 "Name, email, or phone number" and "Add a personal message (optional)" form fields has a contrast ratio of 1.2:1 with the #FFFFFF background.

Other occurrences:

Similar issue repro on PRs #8143, #8022, #8206, #8019, #8196, #8427, #8452, #7362, #8256, #8375, #8682, #8878, #9262, #9213, #9144, #9351, #9400, #9472
Similar issue repro on PR #9347 for checkboxes
Similar issue repro on PR #9486 for form fields like "First name", "Last name", "Phone number", "extension"

Workaround:

Yes

Area issue was found in:

All pages of the Expensify application where borders form fields are appearing.

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