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 all grey icons everywhere, e.g., search, arrows, chevrons, radio buttons, checkboxes
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 link's arrow icon color #A2A9A2 on the light background #FCFBF9 fails the minimum requirements with the color contrast ratio of 2.32: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(s)
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): NA
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/7006038
Issue reported by: NA
Slack conversation: NA
Action Performed:
Precondition: The User should be logged in
This is a global issue for all grey icons everywhere, e.g., search, arrows, chevrons, radio buttons, checkboxes
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 link's arrow icon color #A2A9A2 on the light background #FCFBF9 fails the minimum requirements with the color contrast ratio of 2.32: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(s)
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): NA
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/7006038
Issue reported by: NA
Slack conversation: NA