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.
Additional colors per group
Anchor link to section titled "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
Anchor link to section titled "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.
Color schemes
Anchor link to section titled "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.
Hardcoded colors
Anchor link to section titled "Hardcoded colors"You can use hardcoded colors, but you shouldn't apply hardcoded colors to elements that require an accessible contrast ratio.
