Color

Color helps express hierarchy, establish brand presence, give meaning, and indicate element states.

Introduction

Application of the color palette brings a unified and recognizable consistency to Cengage’s array of digital products and interfaces. We are committed to complying with the Web Content Accessibility Guidelines AA standard contrast ratios.

All text should be legible and meet accessibility standards. The WCAG 2.1 guidelines require a 4.5:1 color contrast between text and background for normal text, and 3:1 for large text. At Cengage we strive to always hit 4.5:1 to avoid any possible issues or questions about whether a piece of text is accessible. Additionally, any non-text visual information provided that is necessary for a user to identify that a control is present and how to operate it must have a minimum 3:1 contrast ratio with the adjacent colors.

Primary

The primary colors are based on our main brand color. These colors are used in logical ways throughout product and marketing to guide the eye and highlight the important elements.

We use primary-500 to indicate primary actions, buttons, text links, etc.

Secondary

The secondary colors are based off secondary-500 from the Cengage Higher Ed branding guidelines. It is commonly used for important calls to action on pages where purchases are made.

Tertiary

The tertiary colors are based off tertiary-500 from the Cengage Higher Ed branding guidelines. It is commonly used in place of the primary colors on dark backgrounds.

Neutrals

The neutrals come in varying levels of saturation to create the right level of contrast. Dark neutrals are the primary colors we use for typography. We commonly use light neutrals for type set on a dark background, or for subtle backgrounds that don’t take away from the cleanliness of a page.

Info

The info colors are used to provide users with neutral, informational feedback. They are primarily used within alerts, and to indicate when an interactive element is in the focused state.

Danger

The danger colors are mainly used for backgrounds in messages and in error states to draw attention to important information or actions that are destructive or block workflow. You'll find red used in components such as alerts, buttons, and typography.

Warning

The warning colors are used to indicate a warning or that progress is impeded. It is primarily used within the alert components.

Success

We use green to celebrate success. The success colors are commonly used in the alerts and through typography.