Digital color palette

OVERVIEW

The color palette and schemes are built into the individual styles and components available in AEM. The digital color palette is brand approved and adjusted to be compliant with accessibility standards. Note: The palette may differ for some CDO sites. 

The following color options are available in AEM:

• The "Column control" component background color defaults to white and includes the options for Off-White (#efefee), Black (#000000), Off Black (#282a2e), and Dark Gray (#505152).
  
  
• The "Icon picker" component provides three color options for the icons available in the digital icon library. Sites that are branded Optum permit Black, Accessible orange (#ce4b27) or White. CDO sites include custom color options. Learn more about the "Icon picker" component.
  
  
• Accessible orange (#ce4b27) can be applied to a heading* appearing on a White or Off White background to help emphasize it.
  *Applies only to text added via the "Text3" component.
  
  
• The color block background color options include: white, off-white, gray lighter, gray darker, off black, black, primary brand. Upon approval of DMX and the brand team accent 1-alt, accent 2-alt, accent 3-alt, and accent 4-alt can be used. — See color swatches. 

The following color schemes are built in to the text styles and cannot be overridden:

• When text is placed on a White or Off-White background the text color automatically becomes Black (#000000) and a hyperlink is blue (#006ca2) with an underline on rollover.
• When text is placed on a Dark Gray, Off Black or Black background, the text color is White (#FFFFFF) and a hyperlink becomes White with an underline.

Infographics, charts and images 

The Optum digital color palette outlines the colors to be used for infographics, charts and images. 

Accessibility Guidelines

When selecting color combinations make certain that they meet the Web Content Accessibility Guidelines (WCAG) 2.1 AA requirements. 

• When text is placed on a background color, the text should contrast greatly from the background. 
  • Large text (18.66px/24pt or larger or 14 pt bold text) must maintain a contrast ratio of at least 3:1.
  • Normal text (18px/14pt) must maintain a contrast ratio of at least 4.5:1. 
  • To check contrast use the contrast checker tool: https://webaim.org/resources/contrastchecker/
• Information conveyed using color must also be available in text. Do not use color-coding information as the sole means of representing information since the information becomes inaccessible to some visitors.