[med] Color Contrast: Many Pages: Color contrast ratio fails for Checkbox.

[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:

Color contrast ratio should be equal or greater than to 3.0:1 for the element between the foreground and background.

Actual Result:

Element has insufficient color contrast of 1.1.1 foreground: #C6C9CA
background: #FFFFFF

Other Occurrence:
Same issue repro on PR #8452, #7362, #8256, #8695, #8682, #8712,  #8758, #8845, #9369, #9056

Similar issue repro on PRs #9347 for the multiple checkboxes
Similar issue repro on PRs #9550 for the "I accept the terms.." checkbox.

Workaround:

Yes

Area issue was found in:

Connect bank account

Failed WCAG checkpoints

1.4.11

User impact:

People who have low vision or are colorblind may find difficulty focusing the element. if the contrast between the foreground and background is insufficient.

Suggested resolution:

By changing foreground color #899494 of the big gray text and the original background color #FFFFFF to meet a contrast ratio of 3.0:1.
Refer to:
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

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.