Web Colors & Accessibility

Promotional Blue

Web Color Usage

The primary color can only be used in combination with white, because its contrast with black does not meet WCAG accessibility standards. In some cases, it may be unavoidable to use the brand color in combination with black or other colors. In those cases, as well as for stylistic elements, the brand color can be lightened or darkened. Note, that the brand color cannot be changed wherever it is used in combination with a logo.

Values and Accessible Breakpoints

For lighter and darker values, it is recommended to use the following palette. It is arranged around the accessible breakpoints of the color (in combination with black and white). The center value meets WCAG AA accessibility contrast criteria for both black and white (i.e. both black and white have a contrast ratio of at least 1:4.5). The next stop up or down meets WCAG AAA accessibility criteria (1:7 contrast ratio) for black (if going up in value) or white (if going down). The added benefit of the second stops, is that they generally fall within 1% of meeting the AA contrast criteria for text that is large and/or bold (1:3 contrast ratio) for the non AAA color. The final outermost values in the palette are added for convenience and fall roughly on a contrast ratio of 1:11 for the accessible AAA colors.

WCAG Accessible Color Breakpoints

Academic Blue

Promotional Blue

* Colors marked with an asterisk may conform to WCAG standard at a 1:3 contrast ratio for bold and large type when the numbers are rounded. If intended to be used in this way they should be lightened or darkened by 1% to ensure compliance.

Legend

AAA = 1:7 or higher contrast (WCAG Level AAA)
AA = 1:4.5 or higher contrast (WCAG Level AA)
AA* = 1:3 or higher contrast (WCAG Level AA only for large and bold type)
FAIL* = 1:2.9 or higher contrast (lighten / darken by 1% to comply with large and bold contrast)
FAIL = insufficient contrast
• (black disk) = contrast with black
° (white disk) = contrast with white

Preprocessors and Accessible Color Palettes

Both LESS and SASS CSS preprocessors feature lighten and darken functions. If used in combination with the accessible palette, accessible variations can be chosen with confidence since any color value lighter than the middle value will always be accessible with black, and any value darker will always be accessible with white.

The lighten / darken functions only modify the luminosity value of a color, thereby leaving the original hue intact. In contrast, tints and shades mix white or black with a color, altering the hue. Therefore, in order to keep the brand most consistent, colors should be lightened or darkened rather than tinted or shaded.

If the palette is used in combination with colors other than white or black, it needs to be shifted to adjust for the reduced contrast. This can be accomplished manually by testing the colors in any of the contrast checkers available online, or by use of a mixin or function that will automatically calculate the appropriate value.

Further Resources

• World Wide Web Consortium (W3C) - Visual Audio Contrast 
• Contrast Ratio by Lea Verou
• Contrast Finder by tanaguru
• SASS function for calculating color contrast

Neutral Brand Colors

The print brand guide specifies Pantone Cool Grey 9c (#75787B) and Pantone Cool Grey 2c (#D0D0CE) as additional greys. Since these colors are nearly identical to values on the accessible pallete of the grey 11c, we do not specify separate greys for the web.

Accent Colors

As with some of the grey colors, some accent colors specified in the print brand guide are sufficiently represented in the accessible color palettes and are therefor not listed separately here. These colors include PMS 7484c, PMS 175c, PMS 1525c, PMS 7458c, PMS 7705c, PMS 7531c, PMS 583c, and PMS 7639c.