Text Colors There are four basic text colors which are intended to cover a large majority of text needs.
For dark text on a light background, we use either 'black' or 'soft black':
Black heading Black body copy
CSS variable name: --colorTextBlack
CSS utility class: color-textBlack
Soft black heading Soft black body copy
CSS variable name: --colorTextBlackSoft
CSS utility class: color-textBlackSoft
For light text on a dark background, we use either 'white' or 'soft white':
White heading White body copy
CSS variable name: --colorTextWhite
CSS utility class: color-textWhite
Soft white heading Soft white body copy
CSS variable name: --colorTextWhiteSoft
CSS utility class: color-textWhiteSoft
Accessible Combinations This is a list of color combinations of our color palette that pass WCAG 2.0 color contrast guidelines. Combinations displayed here pass either the AAA, AA, or AA Large WCAG conformance levels for contrast. AAA and AA combinations are safe to use at any type size. AA Large combinations are safe to use for large text.
To meet AA Large conformance, type must be at least 24px
, or 19px
if bold. This standard is typically written in terms of pt
units (18pt
and 14pt
bold, respectively), which is equivalent to the pixel sizes noted above as the ratio between pt
and px
is 1pt = 1.3333px
.
For more details on appropriate color contrast, see the WCAG description .
Sort By Sort By Foreground Color Background Color Contrast Level Background Color Background Color Minimum Contrast Minimum Contrast AA Large AA AAA AA Large AA Large AAA
FG: --colorWhite BG: --colorBlack
AAA
FG: --colorNeutralCool BG: --colorBlack
AAA
FG: --colorNeutralWarm BG: --colorBlack
AAA
FG: --colorCeramic BG: --colorBlack
AA Large
FG: --colorGreenAccent BG: --colorBlack
AAA
FG: --colorGreenLight BG: --colorBlack
AAA
FG: --colorGold BG: --colorBlack
AAA
FG: --colorGoldLight BG: --colorBlack
AAA
FG: --colorGoldLightest BG: --colorBlack
AA Large
FG: --colorRed BG: --colorBlack
AAA
FG: --colorYellow BG: --colorBlack
AA Large
FG: --colorWhite40 BG: --colorBlack
AA
FG: --colorWhite50 BG: --colorBlack
AAA
FG: --colorWhite60 BG: --colorBlack
AAA
FG: --colorWhite70 BG: --colorBlack
AAA
FG: --colorWhite80 BG: --colorBlack
AAA
FG: --colorWhite90 BG: --colorBlack
AAA
FG: --colorTextWhite BG: --colorBlack
AAA
FG: --colorTextWhiteSoft BG: --colorBlack
AAA
FG: --colorBlack BG: --colorCeramic
AA
FG: --colorGreenStarbucks BG: --colorCeramic
AA
FG: --colorGreenAccent BG: --colorCeramic
AAA
FG: --colorHouseGreen BG: --colorCeramic
AA Large
FG: --colorRed BG: --colorCeramic
AA Large
FG: --colorBlack50 BG: --colorCeramic
AA
FG: --colorBlack60 BG: --colorCeramic
AAA
FG: --colorBlack70 BG: --colorCeramic
AAA
FG: --colorBlack80 BG: --colorCeramic
AAA
FG: --colorBlack90 BG: --colorCeramic
AAA
FG: --colorTextBlack BG: --colorCeramic
AA
FG: --colorTextBlackSoft BG: --colorCeramic
AAA
FG: --colorBlack BG: --colorGold
AA Large
FG: --colorGreenStarbucks BG: --colorGold
AA
FG: --colorHouseGreen BG: --colorGold
AA Large
FG: --colorBlack50 BG: --colorGold
AA Large
FG: --colorBlack60 BG: --colorGold
AA
FG: --colorBlack70 BG: --colorGold
AA
FG: --colorBlack80 BG: --colorGold
AAA
FG: --colorBlack90 BG: --colorGold
AAA
FG: --colorTextBlack BG: --colorGold
AA Large
FG: --colorTextBlackSoft BG: --colorGold
AAA
FG: --colorBlack BG: --colorGoldLight
AA Large
FG: --colorGreenStarbucks BG: --colorGoldLight
AA Large
FG: --colorGreenAccent BG: --colorGoldLight
AAA
FG: --colorHouseGreen BG: --colorGoldLight
AA Large
FG: --colorBlack50 BG: --colorGoldLight
AA
FG: --colorBlack60 BG: --colorGoldLight
AA
FG: --colorBlack70 BG: --colorGoldLight
AAA
FG: --colorBlack80 BG: --colorGoldLight
AAA
FG: --colorBlack90 BG: --colorGoldLight
AAA
FG: --colorTextBlack BG: --colorGoldLight
AA
FG: --colorTextBlackSoft BG: --colorGoldLight
AAA
FG: --colorBlack BG: --colorGoldLightest
AA
FG: --colorGreenStarbucks BG: --colorGoldLightest
AA
FG: --colorGreenAccent BG: --colorGoldLightest
AAA
FG: --colorHouseGreen BG: --colorGoldLightest
AA
FG: --colorRed BG: --colorGoldLightest
AA Large
FG: --colorBlack50 BG: --colorGoldLightest
AA
FG: --colorBlack60 BG: --colorGoldLightest
AAA
FG: --colorBlack70 BG: --colorGoldLightest
AAA
FG: --colorBlack80 BG: --colorGoldLightest
AAA
FG: --colorBlack90 BG: --colorGoldLightest
AAA
FG: --colorTextBlack BG: --colorGoldLightest
AA
FG: --colorTextBlackSoft BG: --colorGoldLightest
AA
FG: --colorWhite BG: --colorGreenAccent
AA
FG: --colorNeutralCool BG: --colorGreenAccent
AA
FG: --colorNeutralWarm BG: --colorGreenAccent
AA
FG: --colorCeramic BG: --colorGreenAccent
AA Large
FG: --colorBlack BG: --colorGreenAccent
AA
FG: --colorGreenLight BG: --colorGreenAccent
AA Large
FG: --colorGoldLight BG: --colorGreenAccent
AA
FG: --colorGoldLightest BG: --colorGreenAccent
AA Large
FG: --colorYellow BG: --colorGreenAccent
AA Large
FG: --colorBlack80 BG: --colorGreenAccent
AA Large
FG: --colorBlack90 BG: --colorGreenAccent
AA Large
FG: --colorWhite60 BG: --colorGreenAccent
AA Large
FG: --colorWhite70 BG: --colorGreenAccent
AA Large
FG: --colorWhite80 BG: --colorGreenAccent
AA
FG: --colorWhite90 BG: --colorGreenAccent
AA Large
FG: --colorTextBlack BG: --colorGreenAccent
AA
FG: --colorTextWhite BG: --colorGreenAccent
AA Large
FG: --colorTextWhiteSoft BG: --colorGreenAccent
AAA
FG: --colorBlack BG: --colorGreenLight
AA
FG: --colorGreenStarbucks BG: --colorGreenLight
AA
FG: --colorGreenAccent BG: --colorGreenLight
AAA
FG: --colorHouseGreen BG: --colorGreenLight
AA Large
FG: --colorRed BG: --colorGreenLight
AA Large
FG: --colorBlack50 BG: --colorGreenLight
AA
FG: --colorBlack60 BG: --colorGreenLight
AAA
FG: --colorBlack70 BG: --colorGreenLight
AAA
FG: --colorBlack80 BG: --colorGreenLight
AAA
FG: --colorBlack90 BG: --colorGreenLight
AAA
FG: --colorTextBlack BG: --colorGreenLight
AA
FG: --colorTextBlackSoft BG: --colorGreenLight
AAA
FG: --colorWhite BG: --colorGreenStarbucks
AAA
FG: --colorNeutralCool BG: --colorGreenStarbucks
AA
FG: --colorNeutralWarm BG: --colorGreenStarbucks
AA
FG: --colorCeramic BG: --colorGreenStarbucks
AA
FG: --colorGreenLight BG: --colorGreenStarbucks
AA Large
FG: --colorGold BG: --colorGreenStarbucks
AA Large
FG: --colorGoldLight BG: --colorGreenStarbucks
AA
FG: --colorGoldLightest BG: --colorGreenStarbucks
AA Large
FG: --colorYellow BG: --colorGreenStarbucks
AA Large
FG: --colorWhite50 BG: --colorGreenStarbucks
AA Large
FG: --colorWhite60 BG: --colorGreenStarbucks
AA
FG: --colorWhite70 BG: --colorGreenStarbucks
AA
FG: --colorWhite80 BG: --colorGreenStarbucks
AA
FG: --colorWhite90 BG: --colorGreenStarbucks
AAA
FG: --colorTextWhite BG: --colorGreenStarbucks
AA
FG: --colorTextWhiteSoft BG: --colorGreenStarbucks
AAA
FG: --colorWhite BG: --colorHouseGreen
AAA
FG: --colorNeutralCool BG: --colorHouseGreen
AAA
FG: --colorNeutralWarm BG: --colorHouseGreen
AAA
FG: --colorCeramic BG: --colorHouseGreen
AAA
FG: --colorGreenLight BG: --colorHouseGreen
AA
FG: --colorGold BG: --colorHouseGreen
AAA
FG: --colorGoldLight BG: --colorHouseGreen
AAA
FG: --colorGoldLightest BG: --colorHouseGreen
AAA
FG: --colorYellow BG: --colorHouseGreen
AA Large
FG: --colorWhite40 BG: --colorHouseGreen
AA Large
FG: --colorWhite50 BG: --colorHouseGreen
AA
FG: --colorWhite60 BG: --colorHouseGreen
AAA
FG: --colorWhite70 BG: --colorHouseGreen
AAA
FG: --colorWhite80 BG: --colorHouseGreen
AAA
FG: --colorWhite90 BG: --colorHouseGreen
AAA
FG: --colorTextWhite BG: --colorHouseGreen
AAA
FG: --colorTextWhiteSoft BG: --colorHouseGreen
AAA
FG: --colorBlack BG: --colorNeutralCool
AAA
FG: --colorGreenStarbucks BG: --colorNeutralCool
AA
FG: --colorGreenAccent BG: --colorNeutralCool
AAA
FG: --colorHouseGreen BG: --colorNeutralCool
AA
FG: --colorRed BG: --colorNeutralCool
AA Large
FG: --colorBlack50 BG: --colorNeutralCool
AA
FG: --colorBlack60 BG: --colorNeutralCool
AAA
FG: --colorBlack70 BG: --colorNeutralCool
AAA
FG: --colorBlack80 BG: --colorNeutralCool
AAA
FG: --colorBlack90 BG: --colorNeutralCool
AAA
FG: --colorTextBlack BG: --colorNeutralCool
AA
FG: --colorTextBlackSoft BG: --colorNeutralCool
AAA
FG: --colorBlack BG: --colorNeutralWarm
AA
FG: --colorGreenStarbucks BG: --colorNeutralWarm
AA
FG: --colorGreenAccent BG: --colorNeutralWarm
AAA
FG: --colorHouseGreen BG: --colorNeutralWarm
AA Large
FG: --colorRed BG: --colorNeutralWarm
AA Large
FG: --colorBlack50 BG: --colorNeutralWarm
AA
FG: --colorBlack60 BG: --colorNeutralWarm
AAA
FG: --colorBlack70 BG: --colorNeutralWarm
AAA
FG: --colorBlack80 BG: --colorNeutralWarm
AAA
FG: --colorBlack90 BG: --colorNeutralWarm
AAA
FG: --colorTextBlack BG: --colorNeutralWarm
AA
FG: --colorTextBlackSoft BG: --colorNeutralWarm
AA
FG: --colorWhite BG: --colorRed
AA
FG: --colorNeutralCool BG: --colorRed
AA Large
FG: --colorNeutralWarm BG: --colorRed
AA Large
FG: --colorCeramic BG: --colorRed
AA Large
FG: --colorBlack BG: --colorRed
AA Large
FG: --colorGreenLight BG: --colorRed
AA
FG: --colorGoldLightest BG: --colorRed
AA Large
FG: --colorBlack70 BG: --colorRed
AA Large
FG: --colorBlack80 BG: --colorRed
AA Large
FG: --colorBlack90 BG: --colorRed
AA Large
FG: --colorWhite70 BG: --colorRed
AA Large
FG: --colorWhite80 BG: --colorRed
AA Large
FG: --colorWhite90 BG: --colorRed
AA Large
FG: --colorTextBlack BG: --colorRed
AA
FG: --colorTextWhite BG: --colorRed
AA Large
FG: --colorTextWhiteSoft BG: --colorRed
AAA
FG: --colorBlack BG: --colorTextWhite
AAA
FG: --colorGreenStarbucks BG: --colorTextWhite
AA
FG: --colorGreenAccent BG: --colorTextWhite
AAA
FG: --colorHouseGreen BG: --colorTextWhite
AA
FG: --colorRed BG: --colorTextWhite
AA Large
FG: --colorBlack50 BG: --colorTextWhite
AA
FG: --colorBlack60 BG: --colorTextWhite
AAA
FG: --colorBlack70 BG: --colorTextWhite
AAA
FG: --colorBlack80 BG: --colorTextWhite
AAA
FG: --colorBlack90 BG: --colorTextWhite
AAA
FG: --colorTextBlack BG: --colorTextWhite
AA
FG: --colorTextBlackSoft BG: --colorTextWhite
AAA
FG: --colorBlack BG: --colorWhite
AAA
FG: --colorGreenStarbucks BG: --colorWhite
AA
FG: --colorGreenAccent BG: --colorWhite
AAA
FG: --colorHouseGreen BG: --colorWhite
AA
FG: --colorRed BG: --colorWhite
AA Large
FG: --colorBlack50 BG: --colorWhite
AA
FG: --colorBlack60 BG: --colorWhite
AAA
FG: --colorBlack70 BG: --colorWhite
AAA
FG: --colorBlack80 BG: --colorWhite
AAA
FG: --colorBlack90 BG: --colorWhite
AAA
FG: --colorTextBlack BG: --colorWhite
AA
FG: --colorTextBlackSoft BG: --colorWhite
AAA
FG: --colorBlack BG: --colorYellow
AA Large
FG: --colorGreenStarbucks BG: --colorYellow
AA Large
FG: --colorGreenAccent BG: --colorYellow
AAA
FG: --colorHouseGreen BG: --colorYellow
AA Large
FG: --colorBlack50 BG: --colorYellow
AA
FG: --colorBlack60 BG: --colorYellow
AA
FG: --colorBlack70 BG: --colorYellow
AAA
FG: --colorBlack80 BG: --colorYellow
AAA
FG: --colorBlack90 BG: --colorYellow
AAA
FG: --colorTextBlack BG: --colorYellow
AA
FG: --colorTextBlackSoft BG: --colorYellow