Color system best practices

The color system that you define in your theme establishes the color contrast between foreground and background colors. Setting up your color system is key to your theme's usability and accessibility. Merchants using your theme need to maintain an adequate color contrast ratio between foreground and background objects when they modify their color selections.

The first part of building your color system is to define your color groups. A color group is a set of colors that are divided by foreground and background roles. This arrangement ensures legibility and accessibility throughout the theme, even when merchants customize the specific colors within the color group. Establishing multiple color groups lets you plan multiple color combinations that you can use for different parts of your theme. For example, you can define a group of colors as part of a primary color group, and define another group of colors as part of a secondary color group, with each color group containing foreground and background roles.

To ensure that you always have sufficient color contrast between your theme elements, build your theme using color pairings from the same color group for elements that require an accessible contrast ratio. Selecting colors for theme elements from different groups can lead to unintended color combinations.

You can output foreground colors as backgrounds in the color scheme variations. As long as both the foreground and background color pairings are selected from the same color group, the color contrast is maintained.

Color scheme baseline settings and output

Color scheme baseline code output

Additional colors per group

You can add new foreground and background colors to a color group. Assign each new color to a foreground or background role within the group, such as heading or subheading. Make sure that your new colors work well with the existing color swatches.

When building your theme, use the following guidelines for additional colors:

  • Additional colors follow the same rules as baseline colors. Choose foreground and background color pairings from the same group for elements that require an accessible contrast ratio.
  • You can invert background and foreground color pairings to create a different color scheme.
  • Don't combine two colors from the same role for elements that require accessible contrast.

Additional colors per group settings and output

Additional colors

If you want to add more colors for the artistic design of your theme, then you can create new color groups. If the colors don't impact elements that require an accessible contrast ratio, then you aren't required to divide the additional color groups into foreground and background roles.

Additional colors settings and output

Color schemes

You can create color schemes for sections and blocks by combining colors from your main palette. To ensure that you always have sufficient color contrast, build your theme using foreground and background color pairings from the same group for elements that require an accessible contrast ratio.

Color scheme settings

Color scheme examples

Hardcoded colors

You can use hardcoded colors, but you shouldn't apply hardcoded colors to elements that require an accessible contrast ratio.

Hardcoded colors correct example

Hardcoded colors incorrect example