When adding text over your background color, image, or video; you might need to add an overlay treatment to improve the readability of the text. If your text color is similar to any part of your background, you should change the color of your scrim to maintain enough contrast for legibility. The following sections provide details about optimal background colors.
On most viewport profiles, the default is dark blue with an overlay gradient and noise.
Default background
On most viewport profiles, the default is dark blue with an overlay gradient and noise.
Default TV background
On TVs, the default full-screen background is a flat dark blue and the default partial screen background has 90% opacity.
You can set background images and videos as best-fill or best-fit.
Best-fill
Best-fill scales the image uniformly up or down so that you completely cover the background for the viewport profile. Consider using best-fill for most background images and videos.
Best-fit
Best-fit scales the image uniformly up or down so that the entire image fits within the viewport profile. Best-fit blurs and duplicates the background image.
You can customize the position of background images and videos in the following ways.
Bottom
Align to the bottom, horizontally centered.
Bottom-left
Align the bottom-left corners.
Bottom-right
Align the bottom-right corners.
Center
Center horizontally and vertically.
Left
Align to the left side, vertically centered.
Right
Align to the right side, vertically centered.
Top
Align to the top, horizontally centered.
Top-left
Align the top-left corners.
Top-right
Align the top-right corners.
There are different options to consider for overlays.
Blur
Use blur to soften images, so that text becomes more legible. You should combine blur with a color overlay or use it for images that have resolution issues when they are sized up.
Color overlay
Use color overlays to increase contrast and improve legibility.
Gradient overlay
Gradient overlays add contrast to the bottom portion of the screen, creating a safe area for text.
You can turn autoplay on or off and you can set how many times the video loops. Videos should be secondary to the experience—not eye-catching or dynamic. In this example, Alexa's speech is primary and the video is secondary.
When you add overlay elements to the background, you can help improve the legibility of text over the background. To make your text highly legible, make sure that the text is at a 4.5:1 contrast ratio to the background of your choice. Amazon designed all the background palette colors for use with white text. You will need to test any other color background to make sure that your text is still legible at a 4.5:1 ratio. For example, if you have a dark background and your text is black, you should choose a contrasting color for the scrim between the background and the text to make sure you're at a ratio of 4.5:1.