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.

warning-indicator 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

checkmark Do use colors that meet color contrast requirements

warning-indicator 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.

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

BluetoTeal


Contact Us

Have a general question or comment? Send us a message