Action Performed:
- Using Chrome, open URL staging.new.expensify.com
- Navigate to Settings > Search for the created workspace and active the profile of that workspace > Details > Members.
- Navigate to the "back (<)" and "Close (X)" icon buttons using the Tab key.
- Measure the color contrast ratio of the grey icon buttons against a white background.
Expected Result:
The visual presentation of meaningful graphical objects or interactive components should have a contrast ratio of at least 3.00:1 with the surrounding background color.
Actual Result:
The grey icons (#C6C9CA) on white background (#FFFFFF) have a color contrast ratio of 1.7:1.
HTML:
<div tabindex="0" class="css-1dbjc4n r-1awozwy r-1loqt21 r-1777fci r-1otgn73 r-1i6wzkk r-lrvibr" style="height: 40px; margin-right: 8px; transition-duration: 0s; width: 40px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="#C6C9CA"><path d="M10.8 18l-6.6-6.6c-.8-.8-.8-1.9 0-2.6l6.6-6.6c.2-.2.6-.2.9 0l.8.8c.2.2.2.6 0 .9L6.4 10l6.1 6.1c.2.2.2.6 0 .9l-.9.9c-.2.2-.6.2-.8.1z"></path></svg></div>
CSS:
svg[Attributes Style] { width: 20; height: 20; fill: rgb(198, 201, 202); }
Other occurrences:
Same issue repro on PRs #8017, #8022, #8206, #8223, #8427, #8452, #7362, #8256, #8375, #8604, #8694, #8682, #8409, #9369, #9056, #9144, #9351, #9400, #9348, #9347 #9472, #9486, #9550
Similar issue was observed for #9266 "Download" and "Close" buttons.
Similar issue was observed for #7702 for the "Close" button.
Workaround:
Yes
Area issue was found in:
All pages of the Expensify application were "back (<)" and "Close (X)" icon buttons are appearing.
Failed WCAG checkpoints
1.4.11
User impact:
When sufficient contrast ratios are not met, users with low vision may have trouble identifying user interface components.
Suggested resolution:
Ensure that the color contrast for all user interface controls in their default as well as active, hover and focus states is 3:1 with the adjacent content.
Platform:
- Web
- iOS
- Android
- Desktop App
- Mobile Web
Version Number: v1.1.49-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Reference link: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
Issue reported by: Sumit
Action Performed:
Expected Result:
The visual presentation of meaningful graphical objects or interactive components should have a contrast ratio of at least 3.00:1 with the surrounding background color.
Actual Result:
The grey icons (#C6C9CA) on white background (#FFFFFF) have a color contrast ratio of 1.7:1.
HTML:
<div tabindex="0" class="css-1dbjc4n r-1awozwy r-1loqt21 r-1777fci r-1otgn73 r-1i6wzkk r-lrvibr" style="height: 40px; margin-right: 8px; transition-duration: 0s; width: 40px;"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="#C6C9CA"><path d="M10.8 18l-6.6-6.6c-.8-.8-.8-1.9 0-2.6l6.6-6.6c.2-.2.6-.2.9 0l.8.8c.2.2.2.6 0 .9L6.4 10l6.1 6.1c.2.2.2.6 0 .9l-.9.9c-.2.2-.6.2-.8.1z"></path></svg></div>CSS:
svg[Attributes Style] { width: 20; height: 20; fill: rgb(198, 201, 202); }Other occurrences:
Same issue repro on PRs #8017, #8022, #8206, #8223, #8427, #8452, #7362, #8256, #8375, #8604, #8694, #8682, #8409, #9369, #9056, #9144, #9351, #9400, #9348, #9347 #9472, #9486, #9550
Workaround:
Yes
Area issue was found in:
All pages of the Expensify application were "back (<)" and "Close (X)" icon buttons are appearing.
Failed WCAG checkpoints
1.4.11
User impact:
When sufficient contrast ratios are not met, users with low vision may have trouble identifying user interface components.
Suggested resolution:
Ensure that the color contrast for all user interface controls in their default as well as active, hover and focus states is 3:1 with the adjacent content.
Platform:
Version Number: v1.1.49-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Reference link: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
Issue reported by: Sumit