OK.gov colors are designed to be clear and accessible. They are made up of Core Colors, Alert Colors, Theme Colors and Highlight Colors.
How it Works
The different color groups have different applications. The Core Color group is coded as actionable for clear navigability. The Focus Colors and Alert Colors are to get attention. The Theme Colors harmonize and unify the site experience.
How to Use
Each color group outlined on this page has a different usage as detailed below.
Core Colors are used for consistency in body text and link colors. With consistent colors for buttons and calls-to-action, the user quickly learns what is actionable, making it easy to navigate the site.
Alert Colors are intentionally loud, and therefore are to be used sparingly. Alert Colors can commonly be found in line strokes, where the content needs to be more pronounced than other content on the page.
Theme Colors, paired in Bright and Dark shades, used in backgrounds and in line strokes, help define the tone of the site, giving it expression. See Theme Colors page for more on this subject.
Highlight Colors are used in the background of Alert messages to convey the tone of a message. Since the background is a color field, it separates it from the white background of the page and other graphics.
Using Color with Headline Type
Color backgrounds can be used with White headlines in the following configurations. The ADA compliance guidelines dictate that the contrast ratio for headlines be at least 3:1.
Headline type with Bright colored background
Headline type with Dark colored background
All of the colors which are specified as Dark can be used as color backgrounds with white header type.
Using Color with Body Text
Color backgrounds can be used with White colored body text in the following configuration. The AA compliance guidelines dictate that the contrast ratio for normal text be at least 4.5:1.