[Medium]: Color Contrast: Insufficient color contrast for control.

[SumitDiyora]

Action Performed:

1. Using Chrome, open URL: staging.new.expensify.com
2. Navigate to Settings > Workspace > Manage members > Invite
3. Navigate to the 'Invite' control using the Tab key.
4. Observe that the analyser reports that the contrast ratio is not sufficient.

Expected Result:

The "Invite" text control (which becomes available on selecting new members) should have a contrast ratio against the control background of 4.5:1 or greater.

Actual Result:

Background/foreground color combinations with an insufficient contrast ratio was found on control. For instance, the #FFFFFF 'Invite' text control (which becomes available on selecting new members)" has an insufficient color contrast ratio of 2.0.1 with a #03D47C background.

other occurrences:
Similar type of issue repro on PR's #8143, #8017, #8039, #8019, #8196, #8452, #8448, #7362, #8256, #8499, #8584, #8521, #8634, #8682, #8878, #9064, #9213, #9144, #9351, #9348, #9472

Similar type of issue on PR's #9347 for "Invite" button
Similar type of issue on PR's #9486 for "Call me" button

Workaround:

Yes

Area issue was found in:

Invite new members

Failed WCAG checkpoints

1.4.3

User impact:

It will be a bit confusing or there will be difficult to perceive the content for the low vision users if the color contrast ratio does not meet the minimum requirement.

Suggested resolution:

Ensure that each text/background color combination presents a contrast ratio of at least 4.5:1.

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/contrast-minimum.html
Issue reported by: Sumit

[melvin-bot]

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