The color palette foundation creates a consistent experience for users and ensures compliance with Web Content Accessibility Guidelines (WCAG) 2.1 AA requirements by thoughtfully pairing background and foreground colors. This means that components with various color options like badges, lozenges, and tags will have a more harmonious feel to them. Additionally, using the color palette will keep consistency when customizing charts, text, annotations, and roadmaps.
Download our color palettes.
A base offering of eight colors can be extended to 16 or 24 when more options are required.
Each background color is paired with a foreground color. The foreground is considered text and ensures that any color chosen is accessible. However, there may be cases where the background color is used for the text color. In such cases, it's the responsibility of the designer to meet WCAG 2.1 AA requirements.
Was this page helpful?
We use this feedback to improve our documentation.