[Medium] Color Contrast: Color contrast ratio fails for 'Download' and 'Close' icons.

[SumitDiyora]

Action Performed:

1. Using Chrome, open URL staging.new.expensify.com
2. Navigate to any 'Chat' using the Tab key.
3. Navigate to any Attachment using the Tab key and press using Enter to select it.
4. Measure the color contrast ratio of the 'Download' and 'Close' icons.

Expected Result:

Color contrast ratio should be equal to or greater than 3.0:1 for the element between the foreground and background.

Actual Result:

Element has insufficient color contrast of 1.7.1 foreground: #C6C9CA background: #FFFFFF

Other occurrences

Same issue repro on PR #9044, #9212, #9284

Workaround:

Yes

Area issue was found in:

Attachment

Failed WCAG checkpoints

1.4.11

User impact:

People who have low vision or are colorblind may find difficulty focusing on the element. if the contrast between the foreground and background is insufficient.

Suggested resolution:

By changing foreground color #899494 of the big gray text and the original background color #FFFFFF to meet a contrast ratio of 3.0:1.

Refer to:
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

Platform:

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: v1.1.51-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
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.