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.

• Use of color
• Text palette
• Background palette
• Controls palette
• Additional resources

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.

Additional resources

• APL Styles Package - Color resources

Back to top