Please change colors only when absolutely necessary (such as when adding multiple buttons). To ensure consistency throughout the site, you’ll want to leave elements (such as headers) with the colors as originally designed.
When applying colors from the site palette, follow the guide below to ensure proper color contrast is met. These color combinations pass WCAG 2.0 AA minimum contrast guidelines. Each color combination below may be used as shown and in reverse (for example, background color on the foreground or foreground color on the background.)
Background (white, #ffffff)
Background | Foreground
Background | Primary
Background | Secondary
Background | Tertiary
Background | Accent
Background | AccentThree
Background | AccentFour
Background | LinkBlue
Background2 (light gray, #efefef)
BackgroundTwo | Foreground
BackgroundTwo | Primary
BackgroundTwo | Secondary
(Large text only!)
BackgroundTwo | Tertiary
BackgroundTwo | Accent
BackgroundTwo | AccentThree
BackgroundTwo | AccentFour
BackgroundTwo | LinkBlue
Accent2 (yellow, #fcb53b)
AccentTwo | Foreground
AccentTwo | Primary
AccentTwo | Tertiary
Accent5 (cyan, #00aae7)
AccentFive | Foreground
AccentFive | Primary