Why Does a CTA Button Get Lost? How to Improve Color Contrast

On a meeting-room rental pricing page, visitors may overlook “Check availability” among price tables and other controls such as “View amenities.” A CTA (Call to Action, the main button prompting a booking or another next step) does not automatically stand out because it is colored. To make the action clearer, examine the button against its immediate surroundings, the text inside the button, and how it differs from secondary actions.

Three contrast problems that can hide a CTA

First, compare the filled button with the surface directly behind it. A pale blue-green panel with an equally light blue-green button may make the button boundary difficult to find. Choosing another hue, or color family, does not solve the problem if the light-dark difference remains too small.

Second, check the label against the button fill. Even when the button shape is visible, people still need to read “Check availability.” Contrast ratio describes the difference in relative luminance between two colors. The button versus surrounding panel and the text versus button need separate measurements.

Third, compare the main CTA with other controls. If “View amenities” is a large filled button just like “Check availability,” both can appear equally important. Keeping a filled style for the primary action and using an underlined text link for supporting details creates a distinction in both form and color. The action that takes priority should follow what visitors most need to do on that page.

Before and after: a meeting-room pricing page

Suppose rental prices and room capacities appear on white cards ■#FFFFFF, with a pale gray page background ■#F5F7F6 and a pale blue-green availability panel ■#DCEBE6. Use deep blue-gray ■#233942 for headings and dark blue-gray ■#3D5159 for explanatory text. The table below assigns colors to each role using HEX (a hexadecimal web color code representing red, green, and blue values).

Before the improvement, the light CTA fill ■#8DB9AC contrasts with the pale panel ■#DCEBE6 at only about 1.77:1, so its colored boundary is easy to lose. White button text ■#FFFFFF against the light fill ■#8DB9AC reaches only 2.17:1. The pale-green amenities button ■#9FBFB5 contrasts with the same panel ■#DCEBE6 at only 1.61:1, making the relative roles of the controls less distinct.

After the improvement, the deep blue-green CTA ■#205B65 contrasts with the pale availability panel ■#DCEBE6 at about 6.22:1. Its white label ■#FFFFFF reaches about 7.65:1 against the CTA background ■#205B65. The secondary link uses dark blue-gray text ■#31565E, which contrasts with the panel ■#DCEBE6 at about 6.51:1. Give the main booking-related action the filled style and use an underlined link for additional room information.

In CSS (Cascading Style Sheets, which specifies webpage appearance), the primary button and secondary link can have separate styles:

.booking-cta {
  background-color: rgb(32 91 101);
  color: rgb(255 255 255);
  border: 2px solid rgb(32 91 101);
  padding: 12px 20px;
  border-radius: 6px;
}
.plan-details {
  background: transparent;
  color: rgb(49 86 94);
  text-decoration: underline;
}
.booking-cta:focus-visible {
  outline: 3px solid rgb(20 58 67);
  outline-offset: 3px;
}

Check the label, control boundary, and keyboard focus separately

The Web Content Accessibility Guidelines (WCAG) 2.2 generally require at least 4.5:1 contrast for normal-sized text and 3:1 for large text. The revised CTA label exceeds the normal-text threshold, whereas the original 2.17:1 combination does not. On the white pricing cards ■#FFFFFF, the deep heading color ■#233942 has a contrast ratio of about 12.10:1 and the explanatory text ■#3D5159 about 8.33:1.

Visual information essential to identifying or operating user interface (UI) controls generally needs at least 3:1 non-text contrast against adjacent colors. This does not mean that all buttons must have a filled shape contrasting at 3:1; a control may also be recognizable through its label, position, or other cues. In this layout, the filled CTA serves as a primary visual cue, so the contrast with the panel is useful. The card border ■#6A7F80 contrasts with the white card ■#FFFFFF at about 4.23:1 and with the pale outer page ■#F5F7F6 at about 3.93:1.

Keep a visible focus outline for keyboard users. If a dark teal outline ■#143A43 appears slightly outside the button on the pale panel ■#DCEBE6, these colors contrast at about 9.95:1. Good numerical contrast alone does not guarantee that the CTA will be noticed. Check the page on a phone, keep “Check availability” as an explicit label, and position the secondary link so the main path through the pricing information remains clear.

HueRoll displays the HEX code and lighter or darker related colors for a selected color, along with its contrast against white or black. It does not automatically compare any arbitrary two colors or assign WCAG AA/AAA outcomes. The panel, button, text, and border comparisons above were calculated separately.