[Medium]: Color Contrast: Insufficient color contrast for 'Card ending in 0004' text control.

[SumitDiyora]

Action Performed:

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

Expected Result:

The "Card ending in 0004" 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 'Card ending in 0004' text control has an insufficient color contrast ratio of 2.0.1 with a #FC3826 background.

HTML:
<div class="css-1dbjc4n r-1777fci" style="min-height: 40px;"><div dir="auto" class="css-901oao css-nfaoni" style="color: rgb(11, 27, 52); font-family: GTAmericaExp-Regular; font-size: 15px; font-weight: 700; line-height: 20px; margin-left: 12px; max-width: 240px; text-align: left;">Ionatan Wiznia Fresco</div><div dir="auto" class="css-901oao" style="color: rgb(125, 139, 143); font-family: GTAmericaExp-Regular; font-size: 13px; margin-left: 12px; margin-top: 4px; text-align: left;">Card ending in 0004</div></div>

CSS:
element.style { background-color: rgb(198, 201, 202); height: 540px; width: 1920px; }

Other occurrences

Same issue repro on PR #8754, #8832, #9312
Same issue repro on PR #9165, #9224 - Insufficient color contrast for 'you appear to be offline' text.

Workaround:

Yes

Area issue was found in:

Payments

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.