[Medium] Color Contrast: Grey icons against white background fail contrast requirements. #8465

Action Performed:

1. Using Chrome, open URL staging.new.expensify.com
2. Navigate to Settings > Search for the created workspace and active the profile of that workspace > Details > Members.
3. Navigate to the "back (<)" and "Close (X)" icon buttons using the Tab key.
4. Measure the color contrast ratio of the grey icon buttons against a white background.

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:

The grey icons (#C6C9CA) on white background (#FFFFFF) have a color contrast ratio of 1.7:1.

HTML:
<div tabindex="0" class="css-1dbjc4n r-1awozwy r-1loqt21 r-1777fci r-1otgn73 r-1i6wzkk r-lrvibr" style="height: 40px; margin-right: 8px; transition-duration: 0s; width: 40px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="#C6C9CA"><path d="M10.8 18l-6.6-6.6c-.8-.8-.8-1.9 0-2.6l6.6-6.6c.2-.2.6-.2.9 0l.8.8c.2.2.2.6 0 .9L6.4 10l6.1 6.1c.2.2.2.6 0 .9l-.9.9c-.2.2-.6.2-.8.1z"></path></svg></div>

CSS:
svg[Attributes Style] { width: 20; height: 20; fill: rgb(198, 201, 202); }

Other occurrences:
Same issue repro on PRs #8017, #8022, #8206, #8223, #8427, #8452, #7362, #8256, #8375, #8604, #8694, #8682, #8409, #9369, #9056, #9144, #9351, #9400, #9348, #9347 #9472, #9486, #9550

Similar issue was observed for #9266 "Download" and "Close" buttons.
Similar issue was observed for #7702 for the "Close" button.

Workaround:

Yes

Area issue was found in:

All pages of the Expensify application were "back (<)" and "Close (X)" icon buttons 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: v1.1.49-1
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