Color Specifications
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
| Spec | Apple Wallet | Google Wallet |
|---|---|---|
| Background color | background.color | background.color |
| Text color (values) | foreground.color | Automatic |
| Text color (labels) | label.color | Automatic |
| Color format | RGB or Hex | RGB or Hex |
| Auto color selection | Yes (if omitted) | Yes (from logo) |
| Text adapts to background | Yes* | Yes (always) |
*Apple: Text forced to white on strip images only.
Apple Wallet
Color Properties
| Property | Purpose | Applies To |
|---|---|---|
background.color | Pass background | Front and back of pass |
foreground.color | Field values | All field values on front |
label.color | Field labels | All field labels on front |
Strip Image Color Override
When using a strip image, iOS overrides your color settings for the primary field area:
| Element | Your Setting | iOS Behavior |
|---|---|---|
| Primary field value | Any color | Forced to white |
| Primary field label | Any color | Forced to white |
| Secondary/auxiliary fields | Respected | Uses your foreground.color |
This override ensures readability over strip images. Design your strip image assuming white text.
Background Image Behavior
| Scenario | background.color |
|---|---|
| No background image | Used as pass background |
| Background image provided | Ignored |
Pass Type Color Behavior
| Pass Type | Strip Image | Background Image | Color Control |
|---|---|---|---|
| Coupon | Yes | No | Primary forced white |
| Event Ticket | Yes | Yes | Primary forced white |
| Access Control | No | No | N/A |
| Loyalty | Yes | No | Primary forced white |
Google Wallet
Color Properties
| Property | Purpose |
|---|---|
background.color | Pass background color |
Google Wallet only accepts one color. All text colors are calculated automatically.
Automatic Text Color
Google automatically calculates text colors for readability:
| Background | Text Color |
|---|---|
| Light backgrounds | Dark text (black/gray) |
| Dark backgrounds | Light 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 Type | Circle Background |
|---|---|
| Opaque logo (no transparency) | Logo fills circle |
| Transparent logo | background.color shows through |
No background.color set | Dominant logo color |
Side-by-Side Comparison
What You Control
| Control | Apple Wallet | Google Wallet |
|---|---|---|
| Background color | Yes | Yes |
| Field value color | Yes (with exceptions) | No |
| Field label color | Yes (with exceptions) | No |
| Text on images | No (iOS overrides) | No (auto) |
Contrast Recommendations
Neither platform publishes official contrast requirements. Follow WCAG 2.1 AA standards:
| Element | Minimum Contrast Ratio |
|---|---|
| Body text | 4.5:1 |
| Large text (18px+ bold, 24px+ regular) | 3:1 |
| UI components and graphics | 3:1 |
| Logos | 3:1 (recommended) |
Logo Color Recommendations
Apple Wallet
| Recommendation | Reason |
|---|---|
| Use solid background in logo | Ensures visibility on any pass color |
Match logo background to background.color | Creates seamless appearance |
| Avoid pure white logos without background | May disappear on light passes |
| Test on light AND dark backgrounds | Passes appear in various contexts |
Google Wallet
| Recommendation | Reason |
|---|---|
| Design for circular crop | Logo is masked to circle |
| Keep 15% margin from edges | Content may be clipped |
| Use contrasting colors in logo | Circle background may match dominant color |
| Test with transparent background | Verify appearance with auto-extracted color |
Consider providing background.color | More control than auto-extraction |
Cross-Platform Logo Strategy
Design one logo that works on both platforms:
| Strategy | Implementation |
|---|---|
| Square format | Works for Apple (rectangle) and Google (circle crop) |
| Centered content | Google's circular mask won't clip |
| Solid background | Consistent on both platforms |
| 15% padding | Safe for Google's crop |
| High contrast | Visible on any background color |
Dark Mode Considerations
Apple Wallet
Apple Wallet does not have a separate dark mode appearance. Your pass colors remain constant.
| Context | Appearance |
|---|---|
| Light mode | Your specified colors |
| Dark mode | Your specified colors (no change) |
| Lock screen | Your specified colors |
Google Wallet
Google Wallet adapts to system dark mode:
| Context | Behavior |
|---|---|
| Light mode | Standard appearance |
| Dark mode | May adjust card appearance |
| Text color | Always auto-calculated for readability |
Test passes in both light and dark mode on Android devices.
Common Mistakes
Assuming text color control on Google — You cannot set text colors; they're automatic
Ignoring strip image override on Apple — Primary fields will be white regardless of
foreground.colorLow contrast colors — Text becomes unreadable, especially in bright sunlight
Relying on auto-extraction — Set
background.colorexplicitly for consistent resultsNot testing on actual devices — Simulators may not match real-world appearance
Forgetting transparency on logos — Background color shows through transparent areas
Platform-Specific Gotchas
Apple Wallet
| Issue | Cause | Solution |
|---|---|---|
| Text invisible on strip | iOS forced white text | Use dark strip images |
| Colors ignored | Background image provided | Remove image or accept override |
| Colors look different on device | Color profile mismatch | Use sRGB color profile |
Google Wallet
| Issue | Cause | Solution |
|---|---|---|
| Unexpected background color | Auto-extracted from logo | Set background.color explicitly |
| Text hard to read | Poor background/text contrast | Choose background with good auto-contrast |
| Logo looks wrong | Circular crop clipped content | Add 15% margin, center content |
Sources
More articles in Technical Reference
This reference provides exact image specifications for Apple Wallet and Google Wallet passes. Use...
Field Limits By PlatformThis reference provides field limits and character constraints for Apple Wallet and Google Wallet...
Barcode And Nfc ReferenceThis reference covers barcode formats and NFC specifications for wallet passes. Both platforms su...