Action Performed:
- Using Chrome, open URL: staging.new.expensify.com
- Navigate to Settings > Payments and activate the 'Ionatan Wiznia ...' control.
- Navigate to the 'Ionatan Wiznia ...' control using the Tab key.
- Observe that the analyser reports that the contrast ratio is not sufficient.
Expected Result:
The "Card ending in 0004" text control should have a contrast ratio against the control background of 4.5:1 or greater.
Actual Result:
Background/foreground color combinations with an insufficient contrast ratio was found on control. For instance, the #FFFFFF 'Card ending in 0004' text control has an insufficient color contrast ratio of 2.0.1 with a #FC3826 background.
HTML:
<div class="css-1dbjc4n r-1777fci" style="min-height: 40px;"><div dir="auto" class="css-901oao css-nfaoni" style="color: rgb(11, 27, 52); font-family: GTAmericaExp-Regular; font-size: 15px; font-weight: 700; line-height: 20px; margin-left: 12px; max-width: 240px; text-align: left;">Ionatan Wiznia Fresco</div><div dir="auto" class="css-901oao" style="color: rgb(125, 139, 143); font-family: GTAmericaExp-Regular; font-size: 13px; margin-left: 12px; margin-top: 4px; text-align: left;">Card ending in 0004</div></div>
CSS:
element.style { background-color: rgb(198, 201, 202); height: 540px; width: 1920px; }
Other occurrences
Same issue repro on PR #8754, #8832, #9312
Same issue repro on PR #9165, #9224 - Insufficient color contrast for 'you appear to be offline' text.
Workaround:
Yes
Area issue was found in:
Payments
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-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Reference link: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
Issue reported by: Sumit
Action Performed:
Expected Result:
The "Card ending in 0004" text control should have a contrast ratio against the control background of 4.5:1 or greater.
Actual Result:
Background/foreground color combinations with an insufficient contrast ratio was found on control. For instance, the #FFFFFF 'Card ending in 0004' text control has an insufficient color contrast ratio of 2.0.1 with a #FC3826 background.
HTML:
<div class="css-1dbjc4n r-1777fci" style="min-height: 40px;"><div dir="auto" class="css-901oao css-nfaoni" style="color: rgb(11, 27, 52); font-family: GTAmericaExp-Regular; font-size: 15px; font-weight: 700; line-height: 20px; margin-left: 12px; max-width: 240px; text-align: left;">Ionatan Wiznia Fresco</div><div dir="auto" class="css-901oao" style="color: rgb(125, 139, 143); font-family: GTAmericaExp-Regular; font-size: 13px; margin-left: 12px; margin-top: 4px; text-align: left;">Card ending in 0004</div></div>CSS:
element.style { background-color: rgb(198, 201, 202); height: 540px; width: 1920px; }Other occurrences
Workaround:
Yes
Area issue was found in:
Payments
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:
Version Number: 1.1.49-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Reference link: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
Issue reported by: Sumit