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