How Should You Choose a Secondary Color? Tips for Color Schemes That Do Not Compete with the Primary Color

A Secondary color supports the Primary color rather than competing with it. It can add color to supporting actions, categories, grouped information, and other lower-priority UI (user interface) elements. The goal is not to create “the second most noticeable color,” but to preserve the Primary color’s role as the strongest cue for the most important action. Choose the Secondary color together with its component role, area, and visual strength instead of judging hue alone.

First define Secondary as a lower-priority role than Primary

For example, use blue ■#1D4ED8 for the main CTA (Call To Action, the control that prompts the action you most want the user to take), with white ■#FFFFFF text. The contrast ratio, meaning the difference in relative luminance between foreground and background, is about 6.70:1. Keep Primary concentrated on the most important actions on the screen, such as purchase, submit, or save.

For Secondary, teal ■#0F766E is one example for filter chips, supporting actions, or category elements that have lower priority than the Primary action. It provides about 5.47:1 contrast against white ■#FFFFFF. Material 3 likewise describes Secondary as a color for less prominent UI components such as filter chips.

If Primary and Secondary are both used as equally large filled buttons and repeated with the same frequency, their hierarchy can become unclear even when their hues differ. Keep the Primary treatment stronger, while using Secondary for smaller components or quieter container treatments.

Make Secondary quieter through tone and area, not only hue

Secondary does not need to use a hue close to Primary. A different hue can still work if its saturation, lightness, area, and component treatment make it visually supporting. For example, use mint ■#CCFBF1 for a small Secondary container and dark teal ■#115E59 for its text. That pair provides about 6.73:1 contrast and creates a softer treatment than the solid blue Primary action.

If a visible border or state icon is needed, teal ■#0F766E provides about 4.86:1 contrast against mint ■#CCFBF1. By contrast, mint ■#CCFBF1 differs from white ■#FFFFFF by only about 1.13:1. Do not make that pale background change the only cue for a selected state or an interactive component; combine it with visible text, icons, or a necessary boundary.

HueRoll’s 60–30–10 Palette includes a Secondary / Supporting role at roughly 30%. This is not a requirement to measure exactly 30% of the pixels. It is a starting point for thinking about a supporting color that may occupy more area than Primary / Accent without taking over the visual hierarchy. HueRoll’s guide also notes that analogous colors, less saturated colors, or neutrals can all work as Secondary choices depending on the content and brand.

Check contrast against the real adjacent background, not between Primary and Secondary by default

WCAG (Web Content Accessibility Guidelines) does not impose one universal contrast ratio between a Primary color and a Secondary color simply because they have those palette roles. What matters is the actual informative combination: text against its background, a state icon against its adjacent color, or a boundary that is needed to identify a user-interface component. Normal-size text requires at least 4.5:1 contrast against its background.

W3C Use of Color also requires that color not be the only visual means of conveying information. If Secondary is used to indicate a selected state, do not rely only on changing the element to teal; add another cue such as a check mark, heavier text, or a label.

In HueRoll, you can adjust candidate colors with three- or six-digit HEX values or the color picker, and review tints, shades, palette suggestions, the 60–30–10 Palette, and contrast between the selected color and white or black. HueRoll does not compare arbitrary custom color pairs or automatically determine WCAG AA or AAA conformance, so the actual Primary, Secondary, background, and text combinations need to be checked separately.