Color

Primary Palette

These are the colors that make our brand. BlueDark is our corporate blue, Blue is our call to action color (links, buttons), Teal is our accent color and White is the color that we primarily use to give focus to content.

BlueDark
#003A70

Blue
#105FA8

TealDark
#03746E

White
#FFFFFF

Gray Palette

Grays are mostly used for text colors and background colors. They support the Primary Palette and help bring more focus on the content.

GrayDarkest
#222222

GrayDarker
#444444

GrayDark
#5D5D5D

Gray
#838383

GrayLight
#BABABA

GrayLighter
#E5E5E5

GrayLightest
#F7F7F7

Background

By default all backgrounds will be White.

Sometimes it is necessary to use color to break up content or give something a container. In these cases, GrayLightest can be used.

In rare ocassions Blue can be used as a background color.

Don't use Blue as a large flood background color.

White
#FFFFFF

GrayLightest
#F7F7F7

Blue
#105FA8

Contrast

We design and build with accessibility in mind. Color contrast for text and buttons must meet WCAG Level AA standards. Contrast can be calculated for different color combinations using the WebAIM Color Contrast Checker.

ADA Contrast Checker

Do use colors that meet color contrast requirements

Don't use color combinations that do not pass color contrast requirements

Acceptable Colors

Some font colors will work for text on White or GrayLightest backgrounds. This chart shows examples of what colors will pass or fail ADA contrast requirements.

BlueDark #003A70	BlueDark #003A70	Pass
Blue #105FA8	Blue #105FA8	Pass
TealDark #03746E	TealDark #03746E	Pass
GrayDarkest #22222	GrayDarkest #222222	Pass
GrayDarker #444444	GrayDarker #444444	Pass
GrayDark #5D5D5D	GrayDark #5D5D5D	Pass
Gray #838383	Gray #838383	Pass*
GrayLight #BABABA	GrayLight #BABABA	Fail
GrayLighter #E5E5E5	GrayLighter #E5E5E5	Fail
GrayLightest #F7F7F7	GrayLightest #F7F7F7	Fail

* Passes, but only for text that is above 24px.

Gradient

We have one gradient that helps bring our primary palette together. This gradient is used sparingly throughout our Elements, Components and Templates.

Don't use a gradient as a large flood background color. This is an ADA compliance issue.

BluetoTeal