[med] Color Contrast: Many Pages: Color contrast ratio fails for Dropdown icon. #8552

Action Performed:

1. Using Chrome, open URL staging.new.expensify.com
2. Navigate to Setting using Tab key and press Enter to select it.
3. Navigate to preferences using Tab key and press using Enter to select it.
4. Measure the color contrast ratio of the Dropdown icon.

Expected Result:

Color contrast ratio should be equal or greater than to 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

Workaround:

Yes

Area issue was found in:

Drop Down controls

Failed WCAG checkpoints

1.4.11

User impact:

People who have low vision or are colorblind may find difficulty focusing 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.49-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by: Stuti

[View all open jobs on GitHu