How to Differentiate Primary and Secondary Buttons with Color: SaaS UI Basics

On a SaaS member-invitation form, “Send Invitation” and “Cancel” can be confusing when they appear as equally prominent filled buttons. Giving them two entirely different bright colors is not necessary. First decide what each action does, then use fill and outline treatments to show their relative importance while keeping the palette restrained. This article uses a team member invitation form to demonstrate the approach.

Make Primary the main action and Secondary its supporting alternative

SaaS means Software as a Service, software accessed over the internet. A UI (user interface) is the screen and set of controls a person uses to interact with it. One useful convention is to make Primary the action that advances the main task in the current context and Secondary a supporting action. These are design roles, not a universal standard that mandates specific colors for all SaaS products.

In a team-invitation dialog, “Send Invitation” is the Primary action after entering an email address and choosing access permissions. “Cancel,” which closes the dialog without sending an invitation, is Secondary. Write labels that explain the result of clicking each button. Vague words such as “OK” or “Back” may make the consequence difficult to predict.

If both buttons are dark and fully filled, their visual emphasis can compete. Instead, give the Primary action a filled background and the Secondary action a white background with an outline. This differentiates the roles without requiring unrelated hues. Neither action needs a warning-red treatment: reserve warning colors for a separate purpose such as communicating an input error.

Use one deep-teal color family for both invitation buttons

For the surrounding page, use very pale blue-gray ■#F8FAFC; for the invitation form, white ■#FFFFFF; and for headings and entered information, dark gray ■#1F2937. Body text has approximately 14.68:1 contrast against the white form and 14.03:1 against the pale page. Supporting descriptions can use slate blue-gray ■#475569, which still provides about 7.58:1 contrast against white ■#FFFFFF. A contrast ratio measures the difference in relative luminance between colors.

Primary — “Send Invitation”: Fill the button with deep teal ■#155E75 and use white lettering ■#FFFFFF. The text-to-fill contrast is approximately 7.27:1. The filled button also contrasts with the pale page background ■#F8FAFC by about 6.95:1. Concentrate the strong filled treatment on the main action within this dialog.

Secondary — “Cancel”: Keep the button white ■#FFFFFF, use the same deep teal ■#155E75 for its text, and add a slate outline ■#64748B. The label has approximately 7.27:1 contrast on white, and the outline has about 4.76:1 contrast with white. The same outline contrasts with the pale page background ■#F8FAFC by approximately 4.55:1. The change in filled area, not an entirely different label color, communicates the lower emphasis.

These are static visual examples, not working controls. On an actual SaaS screen, implement them as proper button elements with the correct actions and accessible names.

Send InvitationCancel

Under WCAG 2.2 (Web Content Accessibility Guidelines, international guidelines for accessible web content), normal-sized text generally needs a contrast ratio of at least 4.5:1 at Level AA. Non-text visual information necessary to identify interactive components, such as meaningful button outlines, generally needs at least 3:1 contrast against adjacent colors. The figures above describe tested color combinations; they do not by themselves establish accessibility conformance for the complete interface. HEX is a hexadecimal code format for specifying colors.

Keep the hierarchy clear during hover, keyboard focus, and errors

On hover, the Primary button could darken to deep teal ■#0F4A5E, giving its white text ■#FFFFFF approximately 9.72:1 contrast. The Secondary button could gain a very pale blue background ■#EEF6FA, with the deep-teal label ■#155E75 still providing approximately 6.64:1 contrast. The pale hover fill ■#EEF6FA differs from white ■#FFFFFF by only about 1.09:1, so keep the button outline and label visible instead of depending on the slight color change alone.

Keyboard focus, the indication of which control is ready for keyboard input after pressing Tab, needs its own distinct treatment. An example is a violet external outline ■#6D28D9 with a small white gap between it and the button. The violet has approximately 7.10:1 contrast against white ■#FFFFFF and 6.79:1 against the pale page background ■#F8FAFC. Avoid placing the violet directly against the deep-teal Primary fill without separation; also review the outline’s thickness and actual surrounding colors.

If the email address is invalid, dark-red explanatory text ■#B91C1C on the white form ■#FFFFFF has approximately 6.47:1 contrast. A specific message such as “Check the email address” is clearer than making the Primary button itself red. Announce a “Sending…” state and the result in words, and prevent duplicate submissions. A service accepting an invitation-email request is not the same as the recipient accepting the invitation.

On smartphones, stacking the buttons vertically is reasonable as long as the filled-versus-outlined hierarchy and sufficient spacing remain clear. HueRoll lets you enter HEX codes, choose colors, and check a selected color against white or black. It cannot compare arbitrary pairs of custom colors or automatically judge WCAG AA or AAA conformance. The form, button, and outline combinations here were calculated separately and should be reviewed in the finished interactive screen.