Color
Accessibility
On this page
Palette Accessibility
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.
Brand Colors
Primary Orange
Orange + Accessibility
Carrot Orange 600 must be used for button backgrounds. When overlaying white text on Orange 600 it must be point size 18px or larger with a font weight of bold. When the point size must be less than 18px, use Gray-900 for the text on buttons with Orange 600.
Carrot-Approved Button Colors
Approved Button colors, 18px+
Font weight must be Bold
Approved Small Button colors, px. size less than 18
Font weight must be Bold
Carrot-Approved Text Contrast Colors
Key:
Levels of contrast conformance: A (lowest), AA (mid-range), and AAA (highest)
FG = Foreground (in this case text/text color)
BG = Background
FW = Font weight
AAA
FG: Gray 900
BG: Orange 100
FW: Regular weight and up
AAA
FG: Gray 900
BG: Orange 200
FW: Regular weight and up
AAA
FG: Gray 900
BG: Orange 300
FW: Regular weight and up
AAA
FG: Gray 900
BG: Orange 400
FW: Regular weight and up
AAA
FG: Gray 900
BG: Orange 500
FW: Regular weight and up
AAA
FG: Gray 900
BG: Orange 600
FW: Must be Bold weight
AA
FG: White
BG: Orange 600
FW: Must be Bold weight
Primary Accent Colors
Indigo
Indigo + Accessibility
Indigo is a complementary color that can be used often and for contrast. If you need one contrast color, use Indigo.
Carrot-Approved Text Contrast Colors
AAA
FG: Gray 900
BG: Indigo 100
FW: Regular weight and up
AAA
FG: Gray 900
BG: Indigo 200
FW: Regular weight and up
AAA
FG: Gray 900
BG: Indigo 300
FW: Regular weight and up
AAA
FG: Gray 900
BG: Indigo 400
FW: Regular weight and up
AA
FG: White
BG: Indigo 500
FW: Must be Bold weight
AAA
FG: White
BG: Indigo 600
FW: Regular weight and up
AAA
FG: White
BG: Indigo 700
FW: Regular weight and up
AAA
FG: White
BG: Indigo 800
FW: Regular weight and up
Teal
Teal + Accessibility
If you want an alternative complementary color to Indigo for large-scale use such as backgrounds or large blocks, use Teal.
Carrot-Approved Text Contrast Colors
AAA
FG: Gray 900
BG: Teal 100
FW: Regular weight and up
AAA
FG: Gray 900
BG: Teal 200
FW: Regular weight and up
AAA
FG: Gray 900
BG: Teal 300
FW: Must be Bold weight
AAA
FG: Gray 900
BG: Teal 400
FW: Must be Bold weight
AAA
FG: Gray 900
BG: Teal 500
FW: Must be Bold weight
AAA
FG: Gray 900
BG: Teal 600
FW: Must be Bold weight
AA
FG: White
BG: Teal 700
FW: Must be Bold weight
Carrot Gray
Carrot-Approved Text Contrast Colors
AAA
FG: Gray 900
BG: Gray 100
FW: Regular weight and up
Secondary Accent Colors
Use Secondary Accent colors sparingly and for small elements on the page or in icons/illustrations.
Accent Blue
Carrot-Approved Text Contrast Colors
AAA
FG: Gray 900
BG: Blue 100
FW: Regular weight and up
AAA
FG: Gray 900
BG: Blue 200
FW: Regular weight and up
AAA
FG: Gray 900
BG: Blue 300
FW: Regular weight and up
AAA
FG: Gray 900
BG: Blue 400
FW: Regular weight and up
AAA
FG: Gray 900
BG: Blue 500
FW: Must be Bold weight
AA
FG: White
BG: Blue 500
FW: Must be Bold weight
AA
FG: Gray 900
BG: Blue 600
FW: Must be Bold weight
AA
FG: White
BG: Blue 600
FW: Must be Bold weight
Accent Purple
Never use purple as the main color for a design. (E.g. as a large background color for an image). It should only be used for small accents, for example as elements in illustrations.
Carrot-Approved Text Contrast Colors
AAA
FG: Gray 900
BG: Purple 100
FW: Regular weight and up
AAA
FG: Gray 900
BG: Purple 200
FW: Regular weight and up
AAA
FG: Gray 900
BG: Purple 300
FW: Must be Bold weight
AA
FG: White
BG: Purple 300
FW: Must be Bold weight
AA
FG: Gray 900
BG: Purple 400
FW: Must be Bold weight
AAA
FG: White
BG: Purple 400
FW: Must be Bold weight
AAA
FG: White
BG: Purple 500
FW: Must be Bold weight
AAA
FG: White
BG: Purple 600
FW: Must be Bold weight
Accent Pink
Never use pink as the main color for a design. (E.g. as a large background color for an image). It should only be used for small accents, for example as elements in illustrations.
Carrot-Approved Text Contrast Colors
AAA
FG: Gray 900
BG: Pink 100
FW: Regular weight and up
AAA
FG: Gray 900
BG: Pink 200
FW: Regular weight and up
AAA
FG: Gray 900
BG: Pink 300
FW: Regular weight and up
AAA
FG: Gray 900
BG: Pink 400
FW: Must be Bold weight
AAA
FG: Gray 900
BG: Pink 500
FW: Must be Bold weight
AA
FG: White
BG: Pink 500
FW: Must be Bold weight
AA
FG: Gray 900
BG: Pink 600
FW: Must be Bold weight
AA
FG: White
BG: Pink 600
FW: Must be Bold weight
Accent Red
Red should be used very sparingly in regular designs. Red 500 should be used for Error messages.
Never use Red for background colors.
Accent Yellow
Yellow 500 should be used for warning messages.
Never use Yellow for background colors.
Accent Green
Accent Green should be used for success messages.
Never use Green for background colors.