Color Contrast: Onboarding: The bright grey progress bar part on the white fails contrast ratio

[elisenwazuoke]

Action Performed:

Prerequisites:

• the user has just created a new account

1. Open the Expensify app
2. Start the onboarding flow
3. Measure the color contrast ratio between the light grey part of the progress bar and the white background

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 light grey color of the progress bar #E7E2DC on the white background #FCFBF9 fails the minimum requirements with the color contrast ratio of 1.24:1

Area issue was found in:

Onboarding

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/7005558
Issue reported by: NA
Slack conversation: NA

[melvin-bot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[dubielzyk-expensify]

I don't think this falls under an accessibility error as this isn't crucial information. To quote the guidelines:

Important visual information meets the same minimum contrast required for larger text.

The number of steps in this progress indicator is not "important visual" information. We have another ticket to ensure the screen readers are reading out the steps so that's covered there.

[rushatgabhane]

asked for qa confirmation on slack to Brian https://expensify.slack.com/archives/C9YU7BX5M/p1773264686626649?thread_ts=1761671288.437029&cid=C9YU7BX5M

[bchapman-accessibilty]

@dubielzyk-expensify If the progress is represented visually as text on the page ("step 1 of 5" etc.) then this issue can be closed since that progress bar information is also available as programmatic text.. I don't see that text in the screen shots on this bug so that fix needs to be seen through.

@rushatgabhane

[melvin-bot]

📣 @bchapman-accessibilty! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>