Color Specifications


Daniel Baudino

Updated February 20, 2026

TL;DR: Complete color specifications for Apple Wallet and Google Wallet passes.
  • Apple: Set background.color, foreground.color, and label.color (RGB or Hex)
  • Google: Set background.color only — text colors are automatic
  • Apple overrides text to white on strip images
  • Google extracts background from logo if not specified
  • Follow WCAG 2.1 AA contrast standards (4.5:1 minimum)

Overview

This reference covers color configuration for Apple Wallet and Google Wallet passes. The platforms handle color differently — Apple gives you control over background and text colors, while Google automatically calculates text colors for you.


Quick Reference

SpecApple WalletGoogle Wallet
Background colorbackground.colorbackground.color
Text color (values)foreground.colorAutomatic
Text color (labels)label.colorAutomatic
Color formatRGB or HexRGB or Hex
Auto color selectionYes (if omitted)Yes (from logo)
Text adapts to backgroundYes*Yes (always)

*Apple: Text forced to white on strip images only.


Apple Wallet

Color Properties

PropertyPurposeApplies To
background.colorPass backgroundFront and back of pass
foreground.colorField valuesAll field values on front
label.colorField labelsAll field labels on front

Strip Image Color Override

When using a strip image, iOS overrides your color settings for the primary field area:

ElementYour SettingiOS Behavior
Primary field valueAny colorForced to white
Primary field labelAny colorForced to white
Secondary/auxiliary fieldsRespectedUses your foreground.color

This override ensures readability over strip images. Design your strip image assuming white text.

Background Image Behavior

Scenariobackground.color
No background imageUsed as pass background
Background image providedIgnored

Pass Type Color Behavior

Pass TypeStrip ImageBackground ImageColor Control
CouponYesNoPrimary forced white
Event TicketYesYesPrimary forced white
Access ControlNoNoN/A
LoyaltyYesNoPrimary forced white

Google Wallet

Color Properties

PropertyPurpose
background.colorPass background color

Google Wallet only accepts one color. All text colors are calculated automatically.

Automatic Text Color

Google automatically calculates text colors for readability:

BackgroundText Color
Light backgroundsDark text (black/gray)
Dark backgroundsLight text (white/light gray)

You cannot override text colors. Design your background color knowing text will adapt.

Logo Background

The circular logo area uses the pass background color:

Logo TypeCircle Background
Opaque logo (no transparency)Logo fills circle
Transparent logobackground.color shows through
No background.color setDominant logo color

Side-by-Side Comparison

What You Control

ControlApple WalletGoogle Wallet
Background colorYesYes
Field value colorYes (with exceptions)No
Field label colorYes (with exceptions)No
Text on imagesNo (iOS overrides)No (auto)

Contrast Recommendations

Neither platform publishes official contrast requirements. Follow WCAG 2.1 AA standards:

ElementMinimum Contrast Ratio
Body text4.5:1
Large text (18px+ bold, 24px+ regular)3:1
UI components and graphics3:1
Logos3:1 (recommended)

Logo Color Recommendations

Apple Wallet

RecommendationReason
Use solid background in logoEnsures visibility on any pass color
Match logo background to background.colorCreates seamless appearance
Avoid pure white logos without backgroundMay disappear on light passes
Test on light AND dark backgroundsPasses appear in various contexts

Google Wallet

RecommendationReason
Design for circular cropLogo is masked to circle
Keep 15% margin from edgesContent may be clipped
Use contrasting colors in logoCircle background may match dominant color
Test with transparent backgroundVerify appearance with auto-extracted color
Consider providing background.colorMore control than auto-extraction

Cross-Platform Logo Strategy

Design one logo that works on both platforms:

StrategyImplementation
Square formatWorks for Apple (rectangle) and Google (circle crop)
Centered contentGoogle's circular mask won't clip
Solid backgroundConsistent on both platforms
15% paddingSafe for Google's crop
High contrastVisible on any background color

Dark Mode Considerations

Apple Wallet

Apple Wallet does not have a separate dark mode appearance. Your pass colors remain constant.

ContextAppearance
Light modeYour specified colors
Dark modeYour specified colors (no change)
Lock screenYour specified colors

Google Wallet

Google Wallet adapts to system dark mode:

ContextBehavior
Light modeStandard appearance
Dark modeMay adjust card appearance
Text colorAlways auto-calculated for readability

Test passes in both light and dark mode on Android devices.


Common Mistakes

  1. Assuming text color control on Google — You cannot set text colors; they're automatic

  2. Ignoring strip image override on Apple — Primary fields will be white regardless of foreground.color

  3. Low contrast colors — Text becomes unreadable, especially in bright sunlight

  4. Relying on auto-extraction — Set background.color explicitly for consistent results

  5. Not testing on actual devices — Simulators may not match real-world appearance

  6. Forgetting transparency on logos — Background color shows through transparent areas


Platform-Specific Gotchas

Apple Wallet

IssueCauseSolution
Text invisible on stripiOS forced white textUse dark strip images
Colors ignoredBackground image providedRemove image or accept override
Colors look different on deviceColor profile mismatchUse sRGB color profile

Google Wallet

IssueCauseSolution
Unexpected background colorAuto-extracted from logoSet background.color explicitly
Text hard to readPoor background/text contrastChoose background with good auto-contrast
Logo looks wrongCircular crop clipped contentAdd 15% margin, center content

Sources

Was this article helpful?
Yes No