[Due for payment 2026-06-08] Expensify Card - User name is not visible on the card image in high contrast mode

[applause-bot]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.78-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #89379
Email or phone of affected tester (no customers): applausetester+khcategory19@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Workspace Settings

Action Performed:

Precondition:

• User has assigned themselves a virtual card.
• Enable High contrast mode in Account > Preferences > Theme.

1. Go to staging.new.expensify.com
2. Go to workspace settings > Expensify Card.
3. Open the assigned card.
4. Highlight user name on the card image.

Expected Result:

User name should be visible on the card image in high contrast mode.

Actual Result:

User name is not visible on the card image in high contrast mode.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome Safari

Screenshots/Videos

Bug7158359_1779230478286.4.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Mita Rachim
Bug ID: 7158359

Issue Owner

Current Issue Owner: @mallenexpensify

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/468226a2a0d14ceb08b6e5bb51f7581c60fbc8be537285c02d3a0dc2a25615be

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #89379

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[MelvinBot]

Proposal

What is the root cause of that problem?

In both high contrast themes (dark-contrast and light-contrast), the textLight token is overridden to colors.productLight900 which is #002E22. The card holder name in CardPreview.tsx is styled with walletCardHolder which sets color: theme.textLight. Since the card SVG background is also #002E22, the text becomes the exact same color as the background — invisible.

What changes do you think we should make in order to solve the problem?

The walletCardHolder style should use a color that is always visible against the dark card background regardless of theme. Since the card SVG background is a fixed dark green (#002E22), the card holder name should use a hardcoded light color (e.g. colors.white or colors.productDark900) instead of the theme-dependent theme.textLight, ensuring the text always contrasts with the card.

Alternatively, a dedicated theme token for text rendered on the card overlay could be introduced so that high contrast themes can set it to a light value independently of textLight.

What alternative solutions did you explore? (Optional)

Modifying the high contrast theme's textLight value was considered but rejected — textLight is used broadly across the app, and changing it would have unintended side effects elsewhere.

Evidence

• Card holder name rendered at CardPreview.tsx:50-56
• walletCardHolder style at index.ts:5081-5089 — uses color: theme.textLight
• Dark-contrast theme: dark-contrast.ts:14 — textLight: colors.productLight900
• Light-contrast theme: light-contrast.ts:14 — textLight: colors.productLight900
• productLight900 = #002E22 at colors.ts:42
• Card SVG background fill is also #002e22 in expensify-card.svg

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[nkuoch]

Probably not a deploy blocker since they are related to high contrast mode setting? @ShridharGoel will work on this