These utilities manage the color properties of various elements including text, background, hyperlinks, inputs, and checkboxes. The combinations are tested for adequate contrast following the distinguishably guideline of the Web Content Accessibility Guidelines (WCAG) AA standard. Hyperlinks are underlined to accommodate color blindness to avoid solely relying on color to distinguish them. WCAG AA compliance depends on the base text size. The examples may not be fully compliant because their font-size is set to a smaller size.

Color Utilities are enabled through Tailwindcss. The background, text, and border color can be set for the static, hover, and responsive states of any element using the proper prefix below.

/* Background Color */
.bg-{{ color }}

/* Text Color */
.text-{{ color }}

/* Border Color */
.border-{{ color }}

/* Hover State (for the background property) */
.hover:bg-{{ color }}

/* Responsive State (for the background property) */
.{{ variant }}:bg-{{ color }}

More details about the configuration can be found in the Tailwindcss Utilities documentation.

The Figma file above contains color styles for use in UI designs and prototypes.