Color
Color is a great way to invoke emotion, meaning, and personality in simple ways. The baseline color system has been designed to be AA accessible with contrast ratios of 4.5:1 for all text and colors, although most of the color and contrast meets AAA ratios.
The design recommendations in the guide reference the Styles Package, which is an additional set of properties that you will need to import to use in your skill. Check out the Alexa Styles Package for more information.
Use of color
Harmonious application of color is determined by the content presented and the context in which it is presented in. Color can convey a branded and intentional experience for your customers to engage with in your skill.
Color can represent emotion and have different meanings for different customers. UI elements should use more than just color to convey meaning. For example, a red label on a form field might not be perceptible as a "required" signifier to a colorblind customer. The color could still be used if paired with a redundant visual indicator such as bold type. Always make sure your text has a high enough contrast ratio, ideally 4.5:1 to the background, to make sure it can be seen by customers at a distance or with low-vision. For more information, see Use of Color on the W3C school site.
For rich media or photographic content experiences such as empty states, photos, or data visualization, the deep blue color is used as a neutral background to let the content take primary focus.
Text palette
| colorText | colorGray100 #FAFAFA #DADADA (for TV, landscape, extra large) |
The default color used for text elements. | |
| colorTextReversed | colorGrey800 #1E2222 | Used when standard text elements are displayed over elements with dramatically different color value than the background. | |
| colorSecondaryText | colorWhite #FFFFFF #DADADA (for TV, landscape, extra large) |
Used to de-emphasize metadata text. | |
| colorSecondaryReversed | colorGray800 #1E2222 | Used for metadata text which appears over elements with dramatically different color values than the background. | |
| colorDisabledText | colorGray100 #FAFAFA | Used for any disabled text, whether primary or secondary. | |
| colorDisabledText Reversed |
colorGray800 #1E2222 | Used for any disabled text, when displayed over elements with dramatically different color value than the background. |
Background palette
| colorBackground | colorBlue800 #232F3E | The color displayed behind content if when no other background styling is applied, i.e. imagery as a background. | |
| colorBackgroundReversed | colorGray200 #EBEDED | The color displayed behind content when no other background styling is applied. For example, when using imagery as a background. | |
| colorBackgroundOverlay | colorBlack #000000 colorBlackTVSafe #0F0F0F (for TV, landscape, extra large) |
Used to cover images with a semi-opaque filter to make them easier to read. It can be a static value or dynamically generated from the imagery. | |
| colorRed800 | #65151E | Red background color. But can be used as a dark red hue. | |
| colorGreen800 | #34581B | Green background color. But can be used as a dark green hue. | |
| colorTeal800 | #0A655E | Teal background color. But can be used as a dark teal hue. | |
| colorBlue800 | #232F3E | Blue background color. But can be used as a dark blue hue. | |
| colorPurple800 | #3E3F68 | Purple background color. But can be used as a dark purple hue. | |
| colorGray800 | #6B7878 | Gray background color. But can be used as a dark gray hue. |
Controls palette
| colorComponent | colorGray100 #FAFAFA #DADADA (for TV, landscape, extra large) |
The primary color used within components in their default state. Examples include default buttons, iconography, button border, or unselected checkbox. | |
| colorComponentReversed | colorGray800 #1E2222 | A dark color used in components that are placed on light backgrounds. |