[med] Color Contrast: Many Pages: Placeholder text fail contrast requirements. #8430

Action Performed:

1. Using Chrome, open URL staging.new.expensify.com
2. Select (+) button.
3. After expanding the + button select new group control.
4. New group window is appearing, Notice placeholder text for the search button.
5. Measure the color contrast ratio for the placeholder text (Name. email or phone no.)

Expected Result:

The contrast ratio for the placeholder should be at least 4.5:1.

Actual Result:

The contrast ratio for the placeholder text is 1.7:1.

Other Occurrences:
Similar type of issues repro on PR #8226 #8019, #8452, #8448, #8375, #8604, #8694, #8535, #8730, #8730, #8778, #8818, #8828, #9144, #9351, #9400, #9031 #9472

Similar type of issues repro on PR #9486 for the placeholder text of all form fields.
Similar type of issues repro on PR #7702 for the placeholder text of "Search" fields.
Similar type of issues repro on PR #9534 for the placeholder text of "Write Something" text field.
Similar type of issues repro on PR #9534 for the placeholder text of "Write Something" text field and for the placeholder text of "Search" text field which becomes available after clicking on emoji button..

Workaround:

No

Area issue was found in:

New group window and all places where placeholder text is placed.

Failed WCAG checkpoints

1.4.3

User impact:

Those who have low vision or color deficiencies may not be able to see the text with low contrast and will not know that this element is there.

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 ##757575 which will give a color contrast ratio of 4.5:1.

Platform:

• Web
• iOS
• 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: