Quick answer
Pick one mid tone brand colour and use it behind every screenshot in the set. Avoid pure white, because the store page is already white in light mode and your screenshots lose their edges. Check the caption against the background at a contrast ratio of at least 4.5 to 1 for normal text, or 3 to 1 for large text.
What colour should the background be?
> Quick answer: One mid tone brand colour, the same one behind every screenshot in the set. Not white, because the store page is already white and your screenshots lose their edges against it.
That single decision does most of the work.
I compared the light and dark versions of several store pages before writing this, because a background that looks right in one mode often falls apart in the other.
That single decision does most of the work.
I compared the light and dark versions of several store pages before writing this, because a background that looks right in one mode often falls apart in the other.
Why white is the wrong default
Open any App Store product page in light mode. The page is white.
Put a white backed screenshot on it and the edges vanish. What should read as five distinct panels reads as one long smear.
The person scrolling doesn't think about why. They just don't stop.
A coloured background gives each panel a boundary, and a boundary is what makes a thumbnail scannable.
There's one exception worth naming. A very light grey, a few steps off white, keeps the clean look and still holds an edge against the page.
Put a white backed screenshot on it and the edges vanish. What should read as five distinct panels reads as one long smear.
The person scrolling doesn't think about why. They just don't stop.
A coloured background gives each panel a boundary, and a boundary is what makes a thumbnail scannable.
There's one exception worth naming. A very light grey, a few steps off white, keeps the clean look and still holds an edge against the page.
Why pure black is also wrong
Same problem in reverse. Dark mode store pages are near black, so a black background disappears in exactly the same way.
And a background that works in one mode and fails in the other is a background that fails for half your visitors.
Mid tones survive both. That's the entire argument for them.
A deep navy, a warm slate, a muted teal. Dark enough to hold white text, light enough to separate from a black page.
Check yours in both modes before you upload. It takes thirty seconds on a phone and it's the step almost nobody does.
And a background that works in one mode and fails in the other is a background that fails for half your visitors.
Mid tones survive both. That's the entire argument for them.
A deep navy, a warm slate, a muted teal. Dark enough to hold white text, light enough to separate from a black page.
Check yours in both modes before you upload. It takes thirty seconds on a phone and it's the step almost nobody does.
The contrast number to check
Whatever colour you pick, the caption has to be readable on it.
The accessibility standard asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text.
Large means 18 point and up, or 14 point bold and up. Screenshot captions are usually large text by that definition.
So 3 to 1 is your floor, and 4.5 to 1 is the number to aim for anyway.
Any free contrast checker will give you the number from two colour values. You do not need to judge this by eye, and judging it by eye is how it goes wrong.
The accessibility standard asks for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text.
Large means 18 point and up, or 14 point bold and up. Screenshot captions are usually large text by that definition.
So 3 to 1 is your floor, and 4.5 to 1 is the number to aim for anyway.
Any free contrast checker will give you the number from two colour values. You do not need to judge this by eye, and judging it by eye is how it goes wrong.
One colour, not five
The temptation is a different colour per screenshot, one per feature.
It looks lively in your design file and it reads as chaos at thumbnail size.
A single background across the set makes the five panels look like one product. Five backgrounds make them look like five unrelated apps.
If you want variety, vary the device angle or the caption length. Leave the colour alone.
This also makes future edits cheap. One value, one change, the whole set updated.
It looks lively in your design file and it reads as chaos at thumbnail size.
A single background across the set makes the five panels look like one product. Five backgrounds make them look like five unrelated apps.
If you want variety, vary the device angle or the caption length. Leave the colour alone.
This also makes future edits cheap. One value, one change, the whole set updated.
Gradients, and when they help
A gentle gradient between two close shades adds depth without costing legibility.
A hard gradient across half the spectrum does the opposite, because the caption sits over two very different values.
The test is simple. If the caption is readable at the lightest point and the darkest point of the gradient, it's fine.
If it isn't, put the caption in a solid band or drop the gradient.
Keep any gradient inside one hue family. Two hues fighting behind a caption is the version that always fails.
A hard gradient across half the spectrum does the opposite, because the caption sits over two very different values.
The test is simple. If the caption is readable at the lightest point and the darkest point of the gradient, it's fine.
If it isn't, put the caption in a solid band or drop the gradient.
Keep any gradient inside one hue family. Two hues fighting behind a caption is the version that always fails.
Where the brand colour actually belongs
Behind the device, not inside it.
The screen content should stay exactly as your app looks. That's the part a person is deciding about.
Tinting the app screen to match the background is a common mistake and it misleads people about what they're downloading.
So the background carries the brand. The screen carries the truth.
Both stores treat a misleading screenshot as a content problem rather than a design choice, so this is worth taking seriously.
The screen content should stay exactly as your app looks. That's the part a person is deciding about.
Tinting the app screen to match the background is a common mistake and it misleads people about what they're downloading.
So the background carries the brand. The screen carries the truth.
Both stores treat a misleading screenshot as a content problem rather than a design choice, so this is worth taking seriously.
Testing at thumbnail size
The size that matters is the one in search results, not the one on your monitor.
Export the set, shrink it to about the width of a thumbnail, and look at it from arm's length.
If you can't tell where one panel ends and the next begins, the background isn't doing its job.
Most sets fail this, including ones that looked sharp at full size. That's the whole reason this section exists.
Do it on a phone, not a laptop. The phone is where the decision happens.
Export the set, shrink it to about the width of a thumbnail, and look at it from arm's length.
If you can't tell where one panel ends and the next begins, the background isn't doing its job.
Most sets fail this, including ones that looked sharp at full size. That's the whole reason this section exists.
Do it on a phone, not a laptop. The phone is where the decision happens.
Colour blindness changes the shortlist
Red and green together is the combination that causes the most trouble, and it's common enough to matter.
So a green background with red accent text is a bad idea regardless of how it measures on contrast.
Contrast and hue are separate problems. A colour pair can pass a contrast check and still be unreadable for some people.
We went through this properly in the colour blind screenshots post.
So a green background with red accent text is a bad idea regardless of how it measures on contrast.
Contrast and hue are separate problems. A colour pair can pass a contrast check and still be unreadable for some people.
We went through this properly in the colour blind screenshots post.
Matching your app icon
Useful, and only up to a point.
If the icon is a strong single colour, using it behind the screenshots ties the listing together at a glance.
If the icon is busy or multicoloured, pick one shade out of it rather than all of them.
The goal is recognition in a search result where the icon and the screenshots sit side by side.
If the icon and the background are the same colour exactly, the icon can vanish into the strip. Shift one of them a few steps.
If the icon is a strong single colour, using it behind the screenshots ties the listing together at a glance.
If the icon is busy or multicoloured, pick one shade out of it rather than all of them.
The goal is recognition in a search result where the icon and the screenshots sit side by side.
If the icon and the background are the same colour exactly, the icon can vanish into the strip. Shift one of them a few steps.
Category conventions are real
Finance apps lean dark and desaturated. Kids apps lean bright. Fitness leans high contrast.
You don't have to follow that, and there's a cost to ignoring it.
A neon yellow finance app reads as untrustworthy before anyone reads a word, fairly or not.
Look at the top ten in your category, note the pattern, then decide deliberately whether to join it or break it.
Breaking the pattern on purpose can work. Breaking it by accident never does.
You don't have to follow that, and there's a cost to ignoring it.
A neon yellow finance app reads as untrustworthy before anyone reads a word, fairly or not.
Look at the top ten in your category, note the pattern, then decide deliberately whether to join it or break it.
Breaking the pattern on purpose can work. Breaking it by accident never does.
What Apple's guidance says about colour
I read Apple's colour guidance for this. It's about app interfaces rather than store assets, and two points carry straight over.
Colour should never be the only way you communicate something.
And colours shift depending on what surrounds them, which is why your background looks different against a white page than it did in your design tool.
Both apply directly to a screenshot set.
Colour should never be the only way you communicate something.
And colours shift depending on what surrounds them, which is why your background looks different against a white page than it did in your design tool.
Both apply directly to a screenshot set.
Dark mode screenshots are a separate question
Some apps ship a set built entirely around the app's dark theme.
That's a decision about what to show, not about the background behind the device.
The two get confused constantly, and they're independent choices.
We covered whether dark app screenshots are worth making in the dark mode post.
You can pair a dark app theme with a light background, and plenty of good listings do exactly that.
That's a decision about what to show, not about the background behind the device.
The two get confused constantly, and they're independent choices.
We covered whether dark app screenshots are worth making in the dark mode post.
You can pair a dark app theme with a light background, and plenty of good listings do exactly that.
The caption sits on top of all this
Background colour and caption legibility are the same problem viewed from two sides.
A background that forces you to shrink the caption or add a heavy shadow is the wrong background.
Get the colour right and the caption needs no tricks at all.
Sizes and weights for that text are in the caption text size post.
If you find yourself adding an outline to the text, the background is too busy. Fix the colour instead.
A background that forces you to shrink the caption or add a heavy shadow is the wrong background.
Get the colour right and the caption needs no tricks at all.
Sizes and weights for that text are in the caption text size post.
If you find yourself adding an outline to the text, the background is too busy. Fix the colour instead.
A colour you can commit to
Pick one. Use it across every screenshot, every device family and both stores.
Consistency across the listing is worth more than the exact shade you land on.
Changing it later is cheap if the design is built properly, because it's one value in one place.
You can set the background once and export the whole set from our editor.
Avoid tying the colour to a season or a campaign. You'll be looking at it for a year.
Consistency across the listing is worth more than the exact shade you land on.
Changing it later is cheap if the design is built properly, because it's one value in one place.
You can set the background once and export the whole set from our editor.
Avoid tying the colour to a season or a campaign. You'll be looking at it for a year.
The short checklist
Not white. Not black. One mid tone, used everywhere.
Caption contrast at 3 to 1 minimum, 4.5 to 1 preferred.
No red and green pairings. No tinting the app screen itself.
Check it at thumbnail size before you upload anything, because that's the size that decides.
One colour, checked in both modes, readable at thumbnail size. Three things, ten minutes.
Caption contrast at 3 to 1 minimum, 4.5 to 1 preferred.
No red and green pairings. No tinting the app screen itself.
Check it at thumbnail size before you upload anything, because that's the size that decides.
One colour, checked in both modes, readable at thumbnail size. Three things, ten minutes.
Frequently asked questions
Should app screenshot backgrounds be white?
Usually not. App Store product pages are white in light mode, so a white background makes your screenshot edges disappear and the set reads as one blurred strip. A mid tone colour gives each panel a boundary, which is what makes a thumbnail scannable.
What contrast ratio do screenshot captions need?
At least 4.5 to 1 for normal text and 3 to 1 for large text, where large means 18 point and up or 14 point bold and up. Most screenshot captions count as large text, so 3 to 1 is the floor. Aiming for 4.5 to 1 gives you room when the image is scaled down.
Can I use a different background colour on each screenshot?
You can, and it usually hurts. One background across the set makes five panels read as one product. Five different colours make them read as five unrelated apps at the size people actually see them. Vary the device angle or the caption instead.
Should the background match my app icon?
It helps if the icon is a single strong colour, because the icon and the screenshots sit next to each other in search results. If the icon is busy, pull one shade out of it rather than using all of them. Recognition is the goal, not an exact match.
How do I know whether a new background colour is better?
Run it as a store listing test rather than deciding by eye. Both stores let you put a variant against your current listing and measure the difference, and the method is covered in [our A/B testing post](/blog/how-to-a-b-test-app-store-screenshots-2026).
Build the mockup in your browser.
Drop a screenshot into a real device frame and export at the exact store size — free, no signup.