Fix cardholder name contrast on Expensify and company card images by roryabraham · Pull Request #91234 · Expensify/App

roryabraham · 2026-05-20T18:55:27Z

Explanation of Change

Cardholder names on card images used theme.textLight to determine text color. This breaks in two ways:

Expensify Card - User name is not visible on the card image in high contrast mode #91137 — High contrast mode flips textLight to dark (#002E22). The Expensify Card has a dark green (#002e22) background, so the name becomes invisible — same color as the card.
Company cards - User name is white on white card image #91139 — In normal light mode, textLight is white (#FFFFFF). Company cards on light feeds (e.g. Plaid, which has a white card face) render invisible white text on a white background.

Fix: compute text color from the card's actual SVG background using WCAG 2.1 relative luminance. Card artwork never changes with the app theme, so theme.textLight is semantically wrong here.

New file src/styles/utils/card.ts:

getRelativeLuminance(hex) — WCAG 2.1 formula
getCardHolderTextColor(bgHex) — returns colors.white or colors.productLight900 based on WCAG crossover luminance (0.179)
getCardFeedBackgroundColor(feedName) — background hex for every known card SVG, derived directly from the SVG artwork

walletCardHolder loses its color property; each callsite passes a computed {color} override.

Fixed Issues

$ #91137
$ #91139

Tests

Setup — inject a mock Expensify Card via the browser console (only needed if you don't have a real card assigned; skip if you already have one in your wallet):

Sign in at https://dev.new.expensify.com:8082/
Open DevTools → Console and run:

// Inject personal details so the cardholder name renders
await window.Onyx.merge('personalDetailsList', {
  '728': { accountID: <your_account_id>, login: '<your_login>', displayName: 'First Last', firstName: 'First', lastName: 'Last' }
});
await window.Onyx.merge('privatePersonalDetails', { legalFirstName: 'First', legalLastName: 'Last' });

// Inject a fake Expensify Card into the card list
await window.Onyx.merge('cardList', {
  '88001': {
    cardID: 88001,
    bank: 'Expensify Card',
    cardName: 'Test Card Virtual',
    lastFourPAN: '4242',
    accountID: <your_account_id>,
    isVirtual: true,
    nameValuePairs: { isVirtual: true, issuedBy: '<your_login>', cardTitle: 'Test Virtual' },
    limit: 100000,
    availableSpend: 100000,
    fundID: '999',
    domainName: '<your_domain>',
  }
});

Reproduce #91137 (Expensify Card, high contrast mode):

Navigate to Account > Preferences > Theme, enable High contrast mode
Navigate to /settings/wallet/card
Before fix: the cardholder name on the dark green card is invisible (dark text #002E22 on dark green #002e22 background)
After fix: the cardholder name is white and clearly visible

Reproduce #91139 (company card with light background, normal mode):

Disable high contrast mode
On staging with a Plaid-connected company card (white card face), open Workspace > Company Cards > the assigned card
Before fix: cardholder name is invisible (white text on white card)
After fix: cardholder name is dark and clearly visible

Verify that no errors appear in the JS console

Offline tests

N/A — display-only style change, no API calls involved.

QA Steps

Retest the linked issues:

Expensify Card - User name is not visible on the card image in high contrast mode #91137
Company cards - User name is white on white card image #91139
Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

MacOS: Chrome

fix-91137-white-text-on-dark-card-high-contrast

fix-91139-dark-text-on-white-card-normal-mode

Use fixed overlay colors for card art instead of theme.textLight so names stay visible in high contrast and on light company card feeds. Co-authored-by: Cursor <cursoragent@cursor.com>

Use WCAG luminance to select text color based on the card's actual background color. Card artwork never changes with app theme, so theme.textLight is wrong — it flips to dark in high-contrast mode, making text invisible on dark-background cards (#91137). Plaid and generic company cards have light backgrounds where the default white text is also invisible (#91139). New utilities in CardUtils: - getRelativeLuminance: WCAG 2.1 relative luminance from hex color - getCardHolderTextColor: returns colors.white or colors.productLight900 based on WCAG crossover luminance (0.179) - getCardFeedBackgroundColor: background hex for each known card feed from the SVG artwork walletCardHolder loses its color property; each callsite passes a computed {color} style override so Expensify Card pages always get white text and company card pages get a color appropriate to their feed's card art. Co-authored-by: Cursor <cursoragent@cursor.com>

codecov · 2026-05-20T21:13:36Z

Codecov Report

❌ Looks like you've decreased code coverage for some files. Please write tests to increase, or at least maintain, the existing level of code coverage. See our documentation here for how to interpret this table.

Files with missing lines	Coverage Δ
src/components/CardPreview.tsx	`100.00% <100.00%> (ø)`
src/libs/CardArtworkColors.ts	`100.00% <100.00%> (ø)`
src/styles/index.ts	`57.51% <ø> (ø)`
...e/companyCards/WorkspaceCompanyCardDetailsPage.tsx	`0.00% <0.00%> (ø)`
...xpensifyCard/WorkspaceExpensifyCardDetailsPage.tsx	`0.00% <0.00%> (ø)`
src/libs/CardUtils.ts	`82.20% <72.72%> (-0.14%)`	⬇️
... and 28 files with indirect coverage changes