Palettes

Color palettes define all the usable colors in the theme. Using colors outside these palettes detracts from the brand and compromises user experience, consistency, and cohesion of pages across the site.

Contrast Ratios

The contrast ratio is a measurement of how dissimilar two colors are from one another, based on their luminance. Ratios range from 1 to 21, where higher ratios correlate with easier-to-read text.

In order to be WCAG 2.0 level AA compliant, small text must have a contrast ratio of at least 4.5:1 and large text must have a ratio of 3:1. Level AAA compliance requires a contrast ratio of 7:1 for small text and 4.5:1 for large text. Large text is definied as 14pt and bold or larger, or 18pt and larger.

Color Combinations

Non-link text and background color combinations use colors from the palettes, and are designed to meet WCAG 2.0 level AAA standards. Using color combinations other than those below detracts from the brand and reduces consistency and compliance.

Combinations are grouped by background color and listed in order of contrast, from highest to lowest.

Contrasts for links are grouped by background color. Link text and background color combinations are designed to meet WCAG 2.0 level AA standards; link text and body text color ($black #000000) combinations are designed to meet WCAG 2.0 level A standards.