How Should You Use Navy and Orange in a Color Scheme? Color Proportions That Make Buttons Stand Out

When navy and orange share a page, using orange for both headings and buttons can make the one action that matters harder to find. One useful approach is to let navy carry the text and larger background areas, while reserving orange for the primary button. The examples below compare a document-download page and a pricing page to show how the proportions, button colors, and text contrast can change with their surroundings.

Reserve orange for the primary button and let navy support the layout

First, decide what the main CTA (call to action) should do. A CTA is a button that invites a next step, such as downloading a document or signing up. Navy can be reused in the header, headings, and body text, while orange is assigned primarily to that one action. If decorative elements and several competing buttons all use the same orange, the intended priority may become unclear.

For this palette, use navy ■#172D49 and a light off-white background ■#FAF8F4. HEX is a way of specifying web colors with a # sign followed by hexadecimal digits and letters. The difference in lightness between these two colors helps organize the rest of the content without requiring more bright accents.

There is no universal rule that says an orange button becomes noticeable at a particular percentage of a page. The proportions below are illustrative estimates for the area initially visible when someone opens the page, not mandatory ratios. They should change with the layout, screen size, and amount of content.

Two practical layouts with different backgrounds and proportions

Dark navy introduction: make a bright orange button the single accent

On a service brochure download page, try approximately 40% navy ■#172D49, 58% off-white ■#FAF8F4, and 2% bright orange ■#F39B45 in the first visible screen. Put the introduction in a large navy section, with a white ■#FFFFFF heading and supporting text. Directly below the copy, place one orange ■#F39B45 button labeled “Download the Brochure,” with navy ■#172D49 text.

Here, the small orange ■#F39B45 button touches the much larger navy ■#172D49 area. Their contrast makes the button’s shape distinguishable without spreading orange across other elements. An off-white ■#FAF8F4 section below the introduction can hold the detailed explanation, separate from the main action.

Light pricing page: darken the orange button

For a page comparing subscription plans, consider about 80% off-white ■#FAF8F4, 18% navy ■#172D49, and 2% orange in the initial screen. Use navy for the header, plan headings, and prices, with a mostly off-white content area. Give the primary “Choose This Plan” button a deeper orange ■#B55018 background and white ■#FFFFFF text. Put the less important “View Details” action in a navy ■#172D49 text link on off-white ■#FAF8F4 instead of adding another filled orange button.

Against this light background, the deeper orange ■#B55018 offers a clearer button boundary than the bright orange ■#F39B45 from the first example. Keep orange off the prices, decorative icons, and secondary headings so that it still identifies the sign-up action. These are example layouts, not a claim that one set of percentages will increase conversions.

Check button text and the outer button boundary separately

A contrast ratio describes the difference in relative lightness between two adjacent colors. Bright orange ■#F39B45 against navy ■#172D49 measures approximately 6.36:1. This is the contrast both at the button boundary on the navy section and between the navy ■#172D49 button lettering and its bright orange background. White ■#FFFFFF text on navy ■#172D49 has a contrast ratio of about 13.93:1.

In the light pricing layout, white ■#FFFFFF text on deep orange ■#B55018 measures about 5.09:1, and the button’s orange ■#B55018 fill against off-white ■#FAF8F4 measures about 4.80:1. By comparison, white ■#FFFFFF lettering on the brighter orange ■#F39B45 achieves only about 2.19:1, while that orange ■#F39B45 against off-white ■#FAF8F4 reaches only about 2.07:1.

WCAG 2.2 (Web Content Accessibility Guidelines) generally requires at least 4.5:1 for normal-sized text and at least 3:1 for visual boundaries needed to identify interactive controls. Test the text against its button fill and the button fill against the surrounding area as separate pairs. Also check keyboard focus indicators, button spacing, and placement on a small screen.

In HueRoll you can enter a HEX code, adjust a color, and check the selected color’s contrast with white and black. Compare other pairs, such as navy and orange, using a separate contrast calculation, then judge the complete button in the actual page layout.