Action Performed:
Precondition: User is logged in
- Open the app
- On the Inbox screen, measure the color contrast ratio of the camera icon against the green background
This is a global issue occurring in all bottom navigation tabs
Expected Result:
Non-text UI elements must have ≥ 3.00:1 contrast with their background.
The camera image should be clearly visible and distinguishable from the green background
Actual Result:
Foreground (camera image): #FFFFFF
Background and the green circle in the camera: #03D37B
Measured ratio: 1.98:1, which is less than the required contrast ratio for Non-text UI elements.
The same white-on-green icon appears in the bottom tab bar icons.
Area issue was found in:
Inbox
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:
Darken the background color so the white icon reaches the required 3.00:1 contrast.
For example, #00AB53 will result in a color contrast ratio of 3.02:1 against the same white camera image.
https://reactnative.dev/docs/image#tintcolor
Environment:
Apple iPhone 14 Pro - iOS 18.7.1, Wi-Fi - Native (No mobile browser)
Samsung Galaxy Note10 Plus - Android 12, 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/7005802
Issue reported by: NA
Slack conversation: NA
Issue Owner
Current Issue Owner: @rushatgabhaneUpwork Automation - Do Not Edit
- Upwork Job URL: https://www.upwork.com/jobs/~022036580868842378597
- Upwork Job ID: 2036580868842378597
- Last Price Increase: 2026-06-02
Action Performed:
Precondition: User is logged in
This is a global issue occurring in all bottom navigation tabs
Expected Result:
Non-text UI elements must have ≥ 3.00:1 contrast with their background.
The camera image should be clearly visible and distinguishable from the green background
Actual Result:
Foreground (camera image): #FFFFFF
Background and the green circle in the camera: #03D37B
Measured ratio: 1.98:1, which is less than the required contrast ratio for Non-text UI elements.
The same white-on-green icon appears in the bottom tab bar icons.
Area issue was found in:
Inbox
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:
Darken the background color so the white icon reaches the required 3.00:1 contrast.
For example, #00AB53 will result in a color contrast ratio of 3.02:1 against the same white camera image.
https://reactnative.dev/docs/image#tintcolor
Environment:
Apple iPhone 14 Pro - iOS 18.7.1, Wi-Fi - Native (No mobile browser)
Samsung Galaxy Note10 Plus - Android 12, 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/7005802
Issue reported by: NA
Slack conversation: NA
Issue Owner
Current Issue Owner: @rushatgabhaneUpwork Automation - Do Not Edit