Action Performed:
Precondition: The User should be logged in
- Open the Expensify app
- Press the 'Account' button at the bottom right corner of the screen
- Measure the color contrast ratio between the grey link's arrow icons and the light background
This is a global issue for other grey icons on bright grey, e.g., 3-dots, camera, hamburger menu, chevron icons for filter buttons
Expected Result:
The visual presentation of the graphical objects should have a contrast ratio of at least 3:1 against the adjacent color.
Actual Result:
The grey emoji button's icon color #E6E1DB on the light background #FCFBF9 fails the minimum requirements with the color contrast ratio of 1.25:1
Area issue was found in:
Profile
Failed WCAG checkpoints
WCAG 1.4.11 Non-text Contrast
https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast
User impact:
People with low vision often have difficulty perceiving graphics that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a relative luminance (lightness difference) of 3:1 or greater can make these items more distinguishable when the person does not see a full range of colors.
Suggested resolution:
Insufficient contrast can make it difficult for individuals with low vision or color blindness to read text on a screen. To improve accessibility, use the darker shade of the focus indicator. For example, the color #A28E7C provides the 3.03:1 color contrast ratio against the same background.
https://www.w3.org/TR/WCAG21/#non-text-contrast
Environment:
Samsung Galaxy S24 Ultra - Android 14, Partner - Native (No mobile browser)
Apple iPhone 11 - iOS 17.5.1, H0T Mobile - Native (No mobile browser)
Screenshots/Videos
**Version Number:**Production
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): No
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36628/community-issues/7006040
Issue reported by: NA
Slack conversation: NA
Issue Owner
Current Issue Owner: @rushatgabhane
Action Performed:
Precondition: The User should be logged in
This is a global issue for other grey icons on bright grey, e.g., 3-dots, camera, hamburger menu, chevron icons for filter buttons
Expected Result:
The visual presentation of the graphical objects should have a contrast ratio of at least 3:1 against the adjacent color.
Actual Result:
The grey emoji button's icon color #E6E1DB on the light background #FCFBF9 fails the minimum requirements with the color contrast ratio of 1.25:1
Area issue was found in:
Profile
Failed WCAG checkpoints
WCAG 1.4.11 Non-text Contrast
https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast
User impact:
People with low vision often have difficulty perceiving graphics that have insufficient contrast. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a relative luminance (lightness difference) of 3:1 or greater can make these items more distinguishable when the person does not see a full range of colors.
Suggested resolution:
Insufficient contrast can make it difficult for individuals with low vision or color blindness to read text on a screen. To improve accessibility, use the darker shade of the focus indicator. For example, the color #A28E7C provides the 3.03:1 color contrast ratio against the same background.
https://www.w3.org/TR/WCAG21/#non-text-contrast
Environment:
Samsung Galaxy S24 Ultra - Android 14, Partner - Native (No mobile browser)
Apple iPhone 11 - iOS 17.5.1, H0T Mobile - Native (No mobile browser)
Screenshots/Videos
**Version Number:**Production
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): No
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36628/community-issues/7006040
Issue reported by: NA
Slack conversation: NA
Issue Owner
Current Issue Owner: @rushatgabhane