I'm creating an event ticket Apple Wallet Pass and setting a light-coloured background image. When I do this, it automatically sets the foregroundColor to white, even when I explicitly set it to black.
What's strange is that on my Mac, the foregroundColor appears as intended, and I can set it to any color I want, but when I AirDrop the pass to my iPhone, it sets the color to white, regardless of what I set the foregroundColor to.
This means the text becomes completely illegible for my users, with white text on a white background image. If I remove the background image, the foregroundColor works fine.
Is there a way to have a light-colored background image with dark text, or am I forced to have a dark-colored background image?
Here are the colors in my pass.json:
- backgroundColor: "rgb(255, 255, 255)"
- foregroundColor: "rgb(0, 0, 0)"
- labelColor: "rgb(0, 0, 0)"
I've attached what the pass looks like on my Mac and my iPhone.
Hi @christopheroka,
You wrote:
I'm creating an event ticket Apple Wallet Pass and setting a light-coloured background image. When I do this, it automatically sets the foregroundColor to white, even when I explicitly set it to black.
This behavior is expected for the event ticket pass style. When an event ticket pass includes a background.png, iOS applies a blur and darkening overlay on top of the image when rendering the pass. Even though your raw image is light/white, iOS visually darkens it significantly at render time. Because of this, iOS automatically overrides your foregroundColor to white to ensure the text remains legible against that darkened result.
On macOS, Wallet renders passes differently and does not apply the same darkening treatment, which is why your explicit black foregroundColor is respected there.
You can use the poster event ticket pass style and Pass Designer as an alternative:
Creating a pass with Pass Designer
https://developer.apple.com/documentation/walletpasses/creating-a-pass-with-pass-designer
Then, you wrote:
Is there a way to have a light-colored background image with dark text, or am I forced to have a dark-colored background image?
You can use strip.png instead of background.png. The strip image is displayed behind the primary fields without the heavy blur/darken treatment, and iOS will respect your foregroundColor setting. This is the most common approach for passes with light backgrounds and dark text.
Note: strip.png and background.png are mutually exclusive on event tickets — if both are present, background.png takes precedence.
Cheers,
Paris X Pinkney | WWDR | DTS Engineer