Orange and Charcoal Gray Color Scheme: How to Make the Button the Focal Point

Pairing an orange button with charcoal gray can help the button stand out. But the same orange looks quite different against a dark background and a light one. The key is not just choosing two appealing colors: you also need to decide where the button goes and what color its label should be. This article uses an online course landing page to show how to give the primary button a clear visual role.

Use charcoal gray across larger areas and reserve orange for the primary button

Our example uses orange ■#F5A03D and charcoal gray ■#30343B. These are illustrative selections, not universal codes assigned to those color names. HEX is a way of writing a web color using a hash sign and six hexadecimal characters.

Charcoal gray is a very dark gray, so using it across a large background creates a strong difference in brightness from a light orange. Reserve orange for the main action, such as a “Sign Up for a Free Trial” button. If you also make every heading underline and decorative shape orange, several equally strong accents may compete with the button.

Another important choice is the button label. Do not automatically use white text on a light orange fill. Instead, use charcoal gray ■#30343B lettering against the orange ■#F5A03D background, creating a greater light–dark difference.

Compare the same orange button on dark and light backgrounds

On an online course page, the button near the top and another one after the course description may sit against different backgrounds. Give them consistent meaning while accounting for their surroundings:

• Opening hero section: Use charcoal gray ■#30343B for the background and white ■#FFFFFF for the course title and description. Place an orange ■#F5A03D “Sign Up for a Free Trial” button here, with charcoal gray ■#30343B lettering. The bright button becomes a clear point of attention in the darker area.
• Course details section: Use warm off-white ■#F8F7F3 for the background and charcoal gray ■#30343B for headings and body text. You can reuse the orange ■#F5A03D sign-up button, but add an approximately 2px charcoal gray ■#30343B border to make its edge easier to distinguish from the light background.
• Secondary information: Show a link such as “Explore the Course” as underlined charcoal gray ■#30343B text on off-white ■#F8F7F3. Avoid giving this secondary action the same filled orange treatment as the primary button.

Keeping the main buttons consistent in color, wording, and purpose helps readers recognize the same action throughout the page. Limit decorative orange elsewhere, and use spacing, labels, and the button shape to establish priority as well as color.

Check the button’s contrast with both its text and surroundings

A contrast ratio measures the difference in relative lightness between colors. Orange ■#F5A03D against charcoal gray ■#30343B has a ratio of approximately 5.94:1. This helps separate the button fill from the dark section. Charcoal gray text on that same orange background also has a ratio of approximately 5.94:1.

Against warm off-white ■#F8F7F3, however, the orange ■#F5A03D fill has a ratio of only about 1.96:1. If the button’s visible shape is an important cue, a charcoal gray ■#30343B border provides about 11.66:1 against the surrounding off-white ■#F8F7F3.

White ■#FFFFFF text on charcoal gray ■#30343B has a ratio of about 12.50:1, while charcoal gray ■#30343B text on warm off-white ■#F8F7F3 has a ratio of about 11.66:1. By comparison, white ■#FFFFFF text on orange ■#F5A03D has a ratio of about 2.10:1. This falls below the 4.5:1 minimum for normal-sized text at WCAG 2.2 Level AA, a level of the Web Content Accessibility Guidelines. Visual cues necessary to identify a control or its state are also subject to a 3:1 non-text contrast requirement against adjacent colors.

Provide a separate visible focus outline for people using a keyboard. On the dark section, for example, a white outline set slightly away from the button can contrast with the charcoal background; on the light section, use a dark outline. Do not rely only on a color shift to show focus. Finally, check both the text-to-button and button-to-background combinations again in the finished mobile layout.