Color theory, palettes, and usability information<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
The Gold palette purposly does not contain a dark shade. Shades of Primary Gold make it difficult to achieve high contrast on screen.<\/p>\n
<\/p>\n<\/div>\n
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.<\/p>\n\n\n\n
In order to be WCAG 2.1<\/a> 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.<\/p>\n\n\n\n <\/p>\n<\/div>\n <\/p>\n<\/div>\n <\/p>\n<\/div>\n <\/p>\n<\/div>\n <\/p>\n<\/div>\n <\/p>\n<\/div>\n <\/p>\n<\/div>\n <\/p>\n<\/div>\n\n\n\n Non-link text and background color combinations use colors from the palettes, and are designed to meet WCAG 2.0 level AAA standards<\/strong>. Using color combinations other than those below detracts from the brand and reduces consistency and compliance.<\/p>\n\n\n\n Combinations are grouped by background color and listed in order of contrast, from highest to lowest.<\/p>\n\n\n\n Gold backgrounds and instances of reverse type (the majority of Blue backgrounds) should not be used over large areas, and be reserved for either specific design elements or special circumstances.<\/p>\n <\/p>\n<\/div>\nColor Combinations<\/h3>\n\n\n\n
\n
$blue #002147<\/div>\n
$lightblue #c0ddf2<\/div>\n
$blue #002147<\/div>\n
$blue #002147<\/div>\n
$blue #002147<\/div>\n
$midblue #30557e<\/div>\n\n
$lightgold #fefada<\/div>\n
$midgold #ffd453<\/div>\n
$gold #B5985A<\/div>\n