Color
What Hue is Carrot? Read on to find our official colors, accessibility guidelines and examples.
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.