We're using cookies, but you can turn them off in Privacy Settings. If you use the site without changing settings, you are agreeing to our use of cookies. Learn more in our Privacy Policy.

Colors

When a color is marked "WCAG safe", that means it has enough contrast to be used as colored text against a white background, or that white text can be displayed against a background of that color. Other color combinations should be checked for contrast before being used in text.

Site Brand Colors

Primary

$p_blue

#017acd
WCAG-safe

$p_green

#138761
WCAG-safe

$p_purple

#5972c8
WCAG-safe

$p_coolgray10

#666666
WCAG-safe

Secondary

$s_bgblue

#002f6c
WCAG-safe

$s_blue

#00b5e2
Not Safe

$s_red

#af272f
WCAG-safe

$s_warmgray10

#796e65
WCAG-safe

$s_green

#78be20
Not Safe

$s_purple

#5949a7
WCAG-safe

$s_coolgray6

#a7a8aa
Not Safe

$s_darkblue

#003da5
WCAG-safe

$s_warmgray6

#a59c94
Not Safe

$s_coolgray11

#53565a
WCAG-safe

Tertiary

$t_orange

#ffa300
Not Safe

$t_darkorange

#ae650c
WCAG-safe

$t_pink

#ef4a81
Not Safe

Text

$text

#231f20
WCAG-safe

$link

#0773be
WCAG-safe

$s_lightgray

#f5f5f5
Default background color for html body

Pastel

These colors are WCAG-safe with black text, and can be used against a white or gray background.

$pastel_blue

#e0eff9

$pastel_green

#e7f3ef

$pastel_purple

#e7ebf7

$pastel_gray

#e8e8e8

$pastel_orange

#fff3de

Recommended Color Combinations

These text/background color combinations meet our accessibility standards.

Text on a Default Background

#ffffff

$s_lightgray

Text on Background Colors

$p_blue

$p_green

$p_purple

$p_coolgray10

$s_red

$s_warmgray10

$s_purple

$s_darkblue

$s_coolgray11

$pastel_blue

$pastel_green

$pastel_purple

$pastel_gray

$pastel_orange

Documentation

Formatting

Eyebrows should use darker colors for weight:

  • $p_blue
  • $s_warmgray10
  • $s_purple
  • $p_green
  • $p_purple
  • $s_red

Alerts should use vibrant colors for visibility:

  • $s_green
  • $t_orange
  • $s_blue
  • $s_red

Icons should use WCAG safe colors.

* $link must be bold to have enough contrast against a colored background.