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 Minimum Contrast Minimum Contrast AA Large AA AAA AA Large AAA
FG: --colorWhite BG: --colorBlack
AAA
FG: --colorGrayNatural BG: --colorBlack
AAA
FG: --colorCream BG: --colorBlack
AAA
FG: --colorCeramic BG: --colorBlack
AA
FG: --colorGreenApron BG: --colorBlack
AA Large
FG: --colorGreenDarkApron BG: --colorBlack
AA Large
FG: --colorGreenAccent BG: --colorBlack
AAA
FG: --colorGreenLight BG: --colorBlack
AAA
FG: --colorGold BG: --colorBlack
AA
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: --colorWhite BG: --colorBlackWarm
AAA
FG: --colorGrayNatural BG: --colorBlackWarm
AAA
FG: --colorCream BG: --colorBlackWarm
AAA
FG: --colorCeramic BG: --colorBlackWarm
AA
FG: --colorGreenApron BG: --colorBlackWarm
AAA
FG: --colorGreenLight BG: --colorBlackWarm
AA
FG: --colorGold BG: --colorBlackWarm
AA Large
FG: --colorRed BG: --colorBlackWarm
AAA
FG: --colorYellow BG: --colorBlackWarm
AA Large
FG: --colorWhite40 BG: --colorBlackWarm
AA
FG: --colorWhite50 BG: --colorBlackWarm
AA
FG: --colorWhite60 BG: --colorBlackWarm
AAA
FG: --colorWhite70 BG: --colorBlackWarm
AAA
FG: --colorWhite80 BG: --colorBlackWarm
AAA
FG: --colorWhite90 BG: --colorBlackWarm
AAA
FG: --colorTextWhite BG: --colorBlackWarm
AAA
FG: --colorTextWhiteSoft BG: --colorBlackWarm
AAA
FG: --colorWhite BG: --colorBlackWarmer
AAA
FG: --colorGrayNatural BG: --colorBlackWarmer
AAA
FG: --colorCream BG: --colorBlackWarmer
AAA
FG: --colorCeramic BG: --colorBlackWarmer
AA Large
FG: --colorGreenApron BG: --colorBlackWarmer
AAA
FG: --colorGreenLight BG: --colorBlackWarmer
AA
FG: --colorGold BG: --colorBlackWarmer
AA Large
FG: --colorRed BG: --colorBlackWarmer
AA
FG: --colorYellow BG: --colorBlackWarmer
AA Large
FG: --colorWhite40 BG: --colorBlackWarmer
AA Large
FG: --colorWhite50 BG: --colorBlackWarmer
AA
FG: --colorWhite60 BG: --colorBlackWarmer
AA
FG: --colorWhite70 BG: --colorBlackWarmer
AAA
FG: --colorWhite80 BG: --colorBlackWarmer
AAA
FG: --colorWhite90 BG: --colorBlackWarmer
AAA
FG: --colorTextWhite BG: --colorBlackWarmer
AA
FG: --colorTextWhiteSoft BG: --colorBlackWarmer
AAA
FG: --colorBlack BG: --colorCeramic
AAA
FG: --colorBlackWarm BG: --colorCeramic
AAA
FG: --colorBlackWarmer BG: --colorCeramic
AA
FG: --colorGreenStarbucks BG: --colorCeramic
AA Large
FG: --colorGreenDarkApron BG: --colorCeramic
AA
FG: --colorGreenAccent BG: --colorCeramic
AAA
FG: --colorHouseGreen 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: --colorCream
AAA
FG: --colorBlackWarm BG: --colorCream
AAA
FG: --colorBlackWarmer BG: --colorCream
AA
FG: --colorGreenStarbucks BG: --colorCream
AA Large
FG: --colorGreenDarkApron BG: --colorCream
AA
FG: --colorGreenAccent BG: --colorCream
AAA
FG: --colorHouseGreen BG: --colorCream
AA Large
FG: --colorRed BG: --colorCream
AA Large
FG: --colorBlack50 BG: --colorCream
AA
FG: --colorBlack60 BG: --colorCream
AAA
FG: --colorBlack70 BG: --colorCream
AAA
FG: --colorBlack80 BG: --colorCream
AAA
FG: --colorBlack90 BG: --colorCream
AAA
FG: --colorTextBlack BG: --colorCream
AA
FG: --colorTextBlackSoft BG: --colorCream
AAA
FG: --colorBlack BG: --colorGold
AA
FG: --colorBlackWarm BG: --colorGold
AA
FG: --colorBlackWarmer 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: --colorGrayNatural
AAA
FG: --colorBlackWarm BG: --colorGrayNatural
AAA
FG: --colorBlackWarmer BG: --colorGrayNatural
AA
FG: --colorGreenStarbucks BG: --colorGrayNatural
AA
FG: --colorGreenDarkApron BG: --colorGrayNatural
AA
FG: --colorGreenAccent BG: --colorGrayNatural
AAA
FG: --colorHouseGreen BG: --colorGrayNatural
AA Large
FG: --colorRed BG: --colorGrayNatural
AA Large
FG: --colorBlack50 BG: --colorGrayNatural
AA
FG: --colorBlack60 BG: --colorGrayNatural
AAA
FG: --colorBlack70 BG: --colorGrayNatural
AAA
FG: --colorBlack80 BG: --colorGrayNatural
AAA
FG: --colorBlack90 BG: --colorGrayNatural
AAA
FG: --colorTextBlack BG: --colorGrayNatural
AA
FG: --colorTextBlackSoft BG: --colorGrayNatural
AA
FG: --colorWhite BG: --colorGreenAccent
AA
FG: --colorGrayNatural BG: --colorGreenAccent
AA
FG: --colorCream BG: --colorGreenAccent
AA
FG: --colorCeramic BG: --colorGreenAccent
AA Large
FG: --colorBlack BG: --colorGreenAccent
AA
FG: --colorGreenLight 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
AA Large
FG: --colorWhite BG: --colorGreenApron
AA
FG: --colorBlack BG: --colorGreenApron
AA
FG: --colorBlackWarm BG: --colorGreenApron
AA Large
FG: --colorBlackWarmer BG: --colorGreenApron
AA Large
FG: --colorHouseGreen BG: --colorGreenApron
AA Large
FG: --colorBlack60 BG: --colorGreenApron
AA
FG: --colorBlack70 BG: --colorGreenApron
AA
FG: --colorBlack80 BG: --colorGreenApron
AA
FG: --colorBlack90 BG: --colorGreenApron
AA
FG: --colorTextBlack BG: --colorGreenApron
AA Large
FG: --colorTextBlackSoft BG: --colorGreenApron
AA Large
FG: --colorTextWhite BG: --colorGreenApron
AA
FG: --colorWhite BG: --colorGreenDarkApron
AA
FG: --colorGrayNatural BG: --colorGreenDarkApron
AA Large
FG: --colorCream BG: --colorGreenDarkApron
AA Large
FG: --colorCeramic BG: --colorGreenDarkApron
AA Large
FG: --colorBlack BG: --colorGreenDarkApron
AA Large
FG: --colorGreenLight BG: --colorGreenDarkApron
AA Large
FG: --colorBlack70 BG: --colorGreenDarkApron
AA Large
FG: --colorBlack80 BG: --colorGreenDarkApron
AA Large
FG: --colorBlack90 BG: --colorGreenDarkApron
AA Large
FG: --colorWhite70 BG: --colorGreenDarkApron
AA Large
FG: --colorWhite80 BG: --colorGreenDarkApron
AA Large
FG: --colorWhite90 BG: --colorGreenDarkApron
AA Large
FG: --colorTextBlack BG: --colorGreenDarkApron
AA
FG: --colorTextWhite BG: --colorGreenDarkApron
AA Large
FG: --colorTextWhiteSoft BG: --colorGreenDarkApron
AAA
FG: --colorBlack BG: --colorGreenLight
AAA
FG: --colorBlackWarm BG: --colorGreenLight
AAA
FG: --colorBlackWarmer BG: --colorGreenLight
AA
FG: --colorGreenStarbucks BG: --colorGreenLight
AA Large
FG: --colorGreenDarkApron BG: --colorGreenLight
AA
FG: --colorGreenAccent BG: --colorGreenLight
AAA
FG: --colorHouseGreen 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
AA
FG: --colorGrayNatural BG: --colorGreenStarbucks
AA
FG: --colorCream BG: --colorGreenStarbucks
AA
FG: --colorCeramic BG: --colorGreenStarbucks
AA
FG: --colorGreenLight BG: --colorGreenStarbucks
AA Large
FG: --colorGold BG: --colorGreenStarbucks
AA Large
FG: --colorYellow BG: --colorGreenStarbucks
AA Large
FG: --colorWhite60 BG: --colorGreenStarbucks
AA Large
FG: --colorWhite70 BG: --colorGreenStarbucks
AA
FG: --colorWhite80 BG: --colorGreenStarbucks
AA
FG: --colorWhite90 BG: --colorGreenStarbucks
AAA
FG: --colorTextWhite BG: --colorGreenStarbucks
AA Large
FG: --colorTextWhiteSoft BG: --colorGreenStarbucks
AAA
FG: --colorWhite BG: --colorHouseGreen
AAA
FG: --colorGrayNatural BG: --colorHouseGreen
AAA
FG: --colorCream BG: --colorHouseGreen
AAA
FG: --colorCeramic BG: --colorHouseGreen
AA Large
FG: --colorGreenApron BG: --colorHouseGreen
AAA
FG: --colorGreenLight BG: --colorHouseGreen
AA
FG: --colorGold BG: --colorHouseGreen
AA Large
FG: --colorRed 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
AA Large
FG: --colorWhite BG: --colorRed
AA Large
FG: --colorGrayNatural BG: --colorRed
AA Large
FG: --colorCream BG: --colorRed
AA
FG: --colorBlack BG: --colorRed
AA Large
FG: --colorBlackWarm BG: --colorRed
AA Large
FG: --colorBlackWarmer BG: --colorRed
AA Large
FG: --colorHouseGreen BG: --colorRed
AA Large
FG: --colorBlack60 BG: --colorRed
AA Large
FG: --colorBlack70 BG: --colorRed
AA
FG: --colorBlack80 BG: --colorRed
AA
FG: --colorBlack90 BG: --colorRed
AA Large
FG: --colorWhite90 BG: --colorRed
AA
FG: --colorTextBlack BG: --colorRed
AA Large
FG: --colorTextBlackSoft BG: --colorRed
AA Large
FG: --colorTextWhite BG: --colorRed
AAA
FG: --colorBlack BG: --colorTextWhite
AAA
FG: --colorBlackWarm BG: --colorTextWhite
AAA
FG: --colorBlackWarmer BG: --colorTextWhite
AAA
FG: --colorGreenStarbucks BG: --colorTextWhite
AA Large
FG: --colorGreenApron BG: --colorTextWhite
AA
FG: --colorGreenDarkApron BG: --colorTextWhite
AA
FG: --colorGreenAccent BG: --colorTextWhite
AAA
FG: --colorHouseGreen BG: --colorTextWhite
AA Large
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: --colorBlackWarm BG: --colorWhite
AAA
FG: --colorBlackWarmer BG: --colorWhite
AAA
FG: --colorGreenStarbucks BG: --colorWhite
AA Large
FG: --colorGreenApron BG: --colorWhite
AA
FG: --colorGreenDarkApron BG: --colorWhite
AA
FG: --colorGreenAccent BG: --colorWhite
AAA
FG: --colorHouseGreen BG: --colorWhite
AA Large
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
AAA
FG: --colorBlackWarm BG: --colorYellow
AA
FG: --colorBlackWarmer 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 Large
FG: --colorTextBlackSoft BG: --colorYellow