Overview
Color differentiates our brands and helps create consistent experiences across our digital products. We use color to help our users know exactly what they need to focus on.
We are committed to complying with the Web Content Accessibility Guidelines (WCAG) AA standard contrast ratios. To do this, choose primary, secondary, and extended colors that support usability by ensuring sufficient color contrast between elements.
Brand palette
Primary colors communicate brand identity. They are widely used across interactive elements, but only used sparingly for text, namely CTA labels and headings.
Neutral palette
Use neutrals for text, borders, and backgrounds.
Semantic palette
Semantic colors communicate status and urgency. Use saturated colors for both text and high-emphasis backgrounds and tint variations for backgrounds only.
Accent palette
Use for emphasis and to communicate function. Does not have hierarchy.
Data visualization
Used in our Data Visualization components.
Accessibility
Color choices that are accessible ensure everyone can not only see every element on a page, but also understand a specific, intended meaning. Everyone should to be able to see the difference between two colors right next to or on top of each other.
Color contrast refers to the perceived difference between foreground and background colors. People with low vision, color blindness, or who have difficulty seeing the differences between colors can have trouble seeing where one element ends and another begins. As we age, the shape of our eyes changes affecting both how we perceive color and how well we can distinguish variations in color. If the contrast between different elements is too low, some people may not be able to see them at all.
Color contrast is expressed as a ratio with the first number representing the foreground color and the second representing the background color. For example, 3:1 means the foreground item color is three times more intense or visible than the background value. Contrast rules apply to text as well as any content that conveys meaning, including icons, graphics, and form elements. Tools such as TPGi's Colour Contrast Analyser or WebAIM's online color contrast tool are useful for verifying contrast ratios.
Color and contrast choices within a digital experience are accessible when people can:
- See UI elements and content
- Understand and interpret information
- Take action
Our aim is to provide a contrast ratio that can be perceived by all users. For this reason, UnitedHealthcare has embraced a minimum contrast ratio of 4.5:1 (foreground vs. background) for UI elements and content that convey meaning.
Recommendations- Include color combinations, good contrast and poor contrast, in design documentation
- Communicate meaning with more than just color, such as with color and descriptive text
- Give focus indicators a unique presentation that meets contrast requirements on all backgrounds
- Non-bolded text smaller than 24 pixels (18 points)
- Bold text smaller than 18 pixels (14 points)
- Essential icons that are close to body text size
Test that non-text elements that communicate information meet a minimum contrast ratio of 3 to 1 for all states:
- Icons
- Data visualizations
- Focus indicators
- Controls, including their borders or boundaries
- Non-bolded text at or above 24 pixels (18 points)
- Bold text at or above 18 pixels (14 points)
Don't worry about contrast for logos and disabled elements. Watch out for using color alone to communicate meaning. People who are color blind or blind cannot perceive the meaning by color alone.
Useful Resources for Color Accessibility