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

[SumitDiyora]

Action Performed:

1. Using Chrome, open URL: staging.new.expensify.com
2. Navigate to Settings > Payments and activate the 'PayPal.me ...' control.
3. Navigate to the 'Delete' control using the Tab key.
4. Observe that the analyser reports that the contrast ratio is not sufficient.

Expected Result:

The "Delete" text control 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 'Delete' text control has an insufficient color contrast ratio of 3.7.1 with a #FC3826 background.

Other Occurrences:
Similar type of issue repro for PR #8173, #8694, #9093, #9207, #9210, #9400, #9347

Workaround:

Yes

Area issue was found in:

PayPal.me

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-1
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.