HTML Color Codes & Palettes | HueRoll
Free color palettes, harmonies and contrast checks

Using Blue Buttons in Web Design | How to Combine Them with Background Colors

TIPS

Blue buttons are common in web design, but the same shade of blue does not work equally well on every background. A deep blue can stand out on a nearly white surface, while a lighter blue may be more useful against navy. Using an online course registration page as an example, this article explains how to coordinate the button fill, label, and surrounding background.

Choose Button Lightness According to the Background

A CTA (call to action) is a button or prompt that encourages the next step, such as signing up. When you choose blue for a CTA, check more than how vivid it looks. Visitors also need to distinguish the button from its surroundings and read its label. A contrast ratio measures the difference in relative luminance, or lightness, between two colors. Higher ratios indicate a greater difference.

Deep blue with white lettering can work well on white and pale blue surfaces. On a navy section, a lighter blue button with navy lettering is another option. Instead of assuming that blue buttons always need white text, adapt both the blue shade and the lettering to the actual background.

Three Background Color Schemes for an Online Course Page

The examples below use HEX codes, hexadecimal color values for the web. Imagine a course information page, a course comparison card, and a dark promotional section. Each area gives a blue button a different setting.

1. A Nearly White Course Introduction

  • Page background: very light gray ■#F8FAFC. Headings and body text: dark blue-gray ■#243247. Their contrast ratio is approximately 12.37:1.
  • “Enroll in this course” button: deep blue ■#1D4ED8 with white text ■#FFFFFF. The text-to-button contrast ratio is approximately 6.70:1, while the button fill contrasts with the page background ■#F8FAFC at approximately 6.41:1.

The lightness difference helps define the button against this background. Still, use an explicit action label and a recognizable button shape instead of relying on the blue fill alone to communicate that it is clickable.

2. A Pale Blue Course Comparison Card

  • Card background: pale blue ■#EBF3FF. Explanatory text: dark blue-gray ■#243247, producing approximately 11.59:1 contrast.
  • “Choose a date” button: keep the same deep blue ■#1D4ED8 and white lettering ■#FFFFFF. Text-to-button contrast stays at approximately 6.70:1, and button-to-card contrast against ■#EBF3FF is approximately 6.00:1.
  • Secondary “View course details” action: use an underlined deep blue ■#1D4ED8 text link on the pale blue card ■#EBF3FF. The text has approximately 6.00:1 contrast with the card. Keeping this action as a link avoids giving every option the visual weight of a filled button.

3. A Navy Free-Trial Promotion

  • Promotion background: dark navy ■#10253D. Heading and descriptive text: light gray ■#E5EDF6. The text-to-background contrast ratio is approximately 13.13:1.
  • “Book a free trial” button: light blue ■#93C5FD with navy text ■#10253D. The label-to-button ratio and the button-to-navy-background ratio are both approximately 8.60:1.

Moving that same light blue button onto the nearly white page background ■#F8FAFC would reduce its fill-to-background contrast to only about 1.72:1. It is better to adjust the button’s lightness for each surface than to force one exact blue onto every part of the page.

Check Labels, Hover, and Keyboard Focus Together

White lettering ■#FFFFFF on the light blue fill ■#93C5FD reaches only about 1.80:1 contrast. This is why a lighter blue does not automatically pair well with white text. Evaluate the label against the button fill as a separate color combination.

For hover, when a pointer is over the button, the light-page version can change to a deeper blue ■#1E40AF while keeping white text ■#FFFFFF at approximately 8.72:1. On the navy promotional section, a lighter hover fill ■#BFDBFE with navy lettering ■#10253D provides approximately 10.91:1.

Focus is the state of being the current keyboard or similar interaction target. Show it with a visible, slightly offset outline rather than relying only on a color change. On the light page, a dark blue outline ■#162D52 contrasts with the background ■#F8FAFC at approximately 13.11:1. On the navy area, a white outline ■#FFFFFF against ■#10253D provides approximately 15.51:1. An outline about 2px wide with a small gap from the button is one possible treatment.

Under WCAG 2.2 (Web Content Accessibility Guidelines) Level AA, normal-sized text generally requires at least 4.5:1 contrast with its background and large text at least 3:1. Essential non-text information used to identify a control or its state needs at least 3:1 contrast with adjacent colors. Because phones generally do not have conventional mouse hover, also test the button’s label, shape, and response after tapping on an actual mobile screen.