[Medium] Chrome: Color Contrast: Insufficient color contrast for 'New' text.

[SumitDiyora]

Action Performed:

1. Using Chrome, open URL: staging.new.expensify.com
2. Navigate to any of the chats with the attached image and hard press on the image
3. Navigate to the "New" text.
4. Observe that the analyser reports that the contrast ratio is not sufficient.

Expected Result:

The "New" text should have a contrast ratio against the page background of 4.5:1 or greater.

Actual Result:

Background/foreground color combinations with an insufficient contrast ratio was found in the text. For instance, the #03D47C "New" text (which becomes available on activating 'Mark as unread' control) has an insufficient color contrast ratio of 2.0.1 with a #FFFFFF background.

Other occurrences

Same issue repro on PR #9203

Workaround:

Yes

Area issue was found in:

Any of the chats with attached image

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.