[med] Color Contrast: Many Pages: All edges of the text box fail contrast requirements.

[Stutikuls]

Action Performed:

1. Using Chrome, open URL staging.new.expensify.com
2. Navigate to Setting using Tab key and press Enter to select it.
3. Navigate to any workspace using Tab key and press using Enter to select it.
4. Navigate to Connect bank account using Tab key and press Enter on it.
5. Navigate to connect manually control using Tab key and press Enter on it.
6. Measure the color contrast ratio of the All edges of the text box.

Expected Result:

The visual presentation of meaningful graphical objects or interactive components should have a contrast ratio of at least 3.00:1 with the surrounding background color.

Actual Result:

All edges of the text box fail contrast requirements. contrast ratio is 1.1:1 for edges of the text box.

Other Occurrences:
Same issue repro on PR #8730, #8493, #8764
Same issue repro on PR #9486 for form fields

Workaround:

Yes

Area issue was found in:

Connect bank account

Failed WCAG checkpoints

1.4.11

User impact:

The low-vision and color-blind users might not be able to see the icons.

Suggested resolution:

Use a darker shade of grey for the icons to achieve a color contrast ratio of at least 3.00:1. One example of color to use is #8D9596, which will give a color contrast ratio of 3.05:1.

Platform:

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

Version Number: v1.1.49-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by: Stuti

[melvin-bot]

@Stutikuls, 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.