Color guidelines

Core palette

Elastic UI builds with a very limited palette. We use a core set of three colors, combined with a green / orange / red qualitative set of three, and finally combine those against a six-color grayscale. Variation beyond these colors is minimal and always done with math manipulation against the original set.

Accessible text contrast

WCAG specifications defines specific contrast ratios between foreground text and a background color. The grid below displays which color combinations pass that rating. In general you should try to use a color combination that is AA or above with the exception of using large text.

Rating definitions

• : AA AAA Passes with a contrast of 4.5+ (7+ for AAA)
• : AA18 Passes with a contrast of 3+, but only if the text is at least 18px or 14px and bold
• : Use only for disabled or inconsequential content

Qualitative visualization palette

The following colors are color-blind safe and should be used in qualitative visualizations.

For more visualization palettes and rendering services, go to the Color Palettes utility page.