To customize a chip’s background color add the .has-bg-$color-$value class to the <span> tag. To customize a chip’s text color add the .is-$color-$value class to the <span> tag. If a chip’s background color is modified but text color is not, text color will default to either white or black in order to achieve an optimal color contrast ratio.
Text in the chip by default will be either white or black. When selecting text and background colors remember to abide by accessiblity standards and make sure the color contrast is 4.5:1. More information about color contrast can be found on the WCAG site.
Grouped chips come in handy when you need to display key value pairs. We’ve made grouping chips easy by wrapping two chips in a <span> tag with the class of .chip-group.