How Do Blue and Orange CTAs Look? Comparing Color Schemes Across Different Backgrounds

When choosing between a blue and an orange sign-up button, it can be tempting to assume that blue will always inspire trust or that orange will always attract more attention. A CTA (Call to Action, a button inviting people to take the next step, such as booking or signing up) does not work independently of its surroundings. Its appearance changes with the page background and other nearby colors. Let’s compare blue and orange versions of a “Book a trial lesson” button for an online cooking class on white, pale blue, pale warm, and deep navy backgrounds.

Consider the surrounding background before choosing blue or orange

On white, a sufficiently dark blue and a sufficiently dark orange can both form clear button surfaces. Against a pale blue background, a blue button stays in a similar hue family, while an orange button introduces a contrasting hue (the type of color, such as blue or orange). On a pale orange-toned background, that relationship changes: orange is closer in hue, while blue introduces more hue difference.

However, different hues do not automatically make a button easier to locate. The light–dark difference between the button and its surroundings, the button’s size, its label, and the space around it all matter. Color alone also cannot establish whether a blue or orange CTA will produce a higher booking or conversion rate.

For a fair visual comparison, keep the button text, dimensions, and placement the same, and view the color options one at a time. Placing both colors on a final page as equally prominent primary buttons can make the main action less clear. Choosing one consistent color for the primary action often produces a more coherent hierarchy.

Compare blue and orange CTAs against four background colors

Imagine a trial-booking page for an online cooking class, with “Book a trial lesson” as the label on both button versions. A HEX code specifies a web color using hexadecimal notation. In the table below, the reported contrast ratio compares the filled button surface with the background outside the button; that is a separate measurement from the contrast between the button label and its fill.

On a white ■#FFFFFF background, deep blue ■#1B5E91 contrasts with the page by approximately 6.87:1, while deep orange ■#A85008 reaches approximately 5.50:1. On pale blue ■#EAF3F9, the ratios become approximately 6.11:1 for blue and 4.90:1 for orange. Orange introduces a different hue from the blue-toned surroundings, yet in this example blue has the higher measured luminance contrast.

Against a pale warm background ■#FFF0E3, blue contrasts by approximately 6.16:1 and orange by 4.93:1. Orange is closer in hue to the warm canvas, so if nearby decorative elements also use warm colors, spacing can help separate the action from the surrounding content. In all three light-background examples, white ■#FFFFFF button text on blue ■#1B5E91 has approximately 6.87:1 contrast, and white text on orange ■#A85008 has approximately 5.50:1.

On deep navy ■#182B41, reusing the original dark blue ■#1B5E91 and orange ■#A85008 button fills reduces their contrast against the page to approximately 2.09:1 and 2.61:1. If the filled area is necessary for someone to identify the control, these surfaces may not provide enough separation. Instead, try light blue ■#8BC7F2 or light orange ■#FFC38A with deep navy ■#182B41 text. The text contrasts with its button fill by approximately 7.91:1 and 9.19:1, respectively. The light button fills also contrast with the surrounding navy by those same ratios.

Adjust button text, nearby colors, and the number of CTAs

Do not leave white ■#FFFFFF text on the light blue ■#8BC7F2 or light orange ■#FFC38A versions. Their contrast ratios with white text are only about 1.82:1 and 1.56:1, which are insufficient for normal-sized text. Treat the darker label color as part of the adapted button palette, not as an optional detail.

For surrounding descriptions on the three light backgrounds, dark blue-gray text ■#283747 has approximately 12.15:1 contrast on white ■#FFFFFF, 10.82:1 on pale blue ■#EAF3F9, and 10.90:1 on pale warm ■#FFF0E3. On deep navy ■#182B41, pale text ■#F4F8FC provides approximately 13.47:1. Once the text is readable, also check button size, spacing, and the clarity of the action label.

Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal text needs a contrast ratio of at least 4.5:1 against its background, and qualifying large text at least 3:1. Visual information necessary to identify a UI component generally needs at least 3:1 against adjacent colors. However, that does not mean every filled button must have a 3:1 border contrast when its text already identifies the control. The ratios here describe opaque solid-color pairs, not actual conversion rates or conformance for the entire page.

HueRoll lets you enter HEX codes, explore lighter and darker color suggestions, and compare a selected color against white or black. It does not directly compare two arbitrary custom colors or automatically assess AA or AAA conformance, so check the button surface against its surrounding background using another method. Whichever hue you choose, review the actual layout and text readability on mobile as well.