Palette Organization and Accessibility

The Carrot Color palette is organized by hue (orange, blue, etc.) and then by tint (lighter version) or shade (darker version). The colors are listed as the lightest being 100, the darkest being 900.

Download the Carrot .ase palette.

When placing text on one of the Carrot colors it is imperative to do a contrast check: https://webaim.org/resources/contrastchecker/

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.

Primary Orange

The Primary Brand Color is Carrot Orange 500. This has replaced the slightly lighter orange (400) because of contrast issues.

Accessibility

Carrot Orange 600 must be used for button backgrounds.

When overlaying white text on Orange 600 it must be point size 14 or larger with a font weight of bold.

When the point size must be less than 14, use Gray-900 for the text on buttons with Orange 600.

Carrot Approved Button Colors

Primary Accent Colors

Indigo

Indigo is a complementary color that can be used often and for contrast. If you need one contrast color, use Indigo.

500 and 600 are used for backgrounds. 

700 should be used for line art and strokes in illustrations or graphics.

Teal

If you want an alternative complementary color to Indigo for large-scale use such as backgrounds or large blocks, use Teal.

Carrot Gray

Use Gray 100 for backgrounds only.

Use Gray 700 for body text and captions.

Use Gray 900 for title text.

Secondary Accent Colors

Use Secondary Accent colors sparingly and for small elements on the page or in icons/illustrations.

Accent Blue

Accent Blue should also be used for notifications.

Accent Red

Red should be used very sparingly in regular designs. Red-500 should be used for Error messages.

Accent Yellow

Yellow 500 should be used for warning messages.

Accent Green

Accent Green should be used for success messages.

Accent Purple

Pink