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

[SumitDiyora]

Action Performed:

1. Using Chrome, open URL: staging.new.expensify.com
2. Navigate to Settings > Create new Workspace > Search for the created workspace > Details.
3. Navigate to "Extra" and "1" text.
4. Observe that the analyser reports that the contrast ratio is not sufficient.

Expected Result:

The "Extra" and "1" 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 #7D8B8F "Extra" and "1" text has an insufficient color contrast ratio of 3.5.1 with a #FFFFFF background.

other occurrences:
Similar type of issues repro on PR #8065, #8103, #8025, #8058, #8196

Workaround:

Yes

Area issue was found in:

Details

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