Color in Buttons — Complete Button Color Guide

Button colors do more work than any other color choice — they signal hierarchy, communicate state, and must remain accessible at every interaction.

The Three Button Hierarchy Levels

Primary Buttons

Filled with the primary brand color. Reserved for the single most important action on a page — usually "Save," "Submit," "Continue" or "Get Started." Use one primary button per screen or section. Multiple primary buttons create confusion about which is most important.

Background: Saturated primary color
Text: White (or sufficient contrast against the primary)
Contrast: Text must pass 4.5:1 against button background

Secondary Buttons

Outlined or filled with a neutral/muted color. Used for important but non-primary actions — "Cancel," "Back," "Learn More." Can be multiple per screen without competing with the primary.

Background: Transparent or light neutral
Border: Primary color or neutral
Text: Primary color or dark neutral

Tertiary Buttons

Text-only or very minimal styling. Used for low-priority actions — "Skip," "Later," inline links. Have no visual weight that competes with primary buttons.

Background: Transparent
Text: Primary color or dark neutral
Underline: Often appears on hover only

Button States

Every button needs at least five states, each visually distinct:

Default

The normal state. Primary button background is the brand color at full saturation.

Hover

Indicates interactivity. Usually 10% darker than default. Add a subtle shadow or lift for additional feedback.

Active/Pressed

Confirms the user has clicked. Usually 20% darker, often with a slight transform (translateY(1px)) to simulate being pressed.

Focus

Critical for keyboard accessibility. A visible ring around the button (2-3px, primary or accent color) that meets 3:1 contrast against adjacent colors. Focus must be visible even on buttons that look "fine" — this is WCAG 2.4.7 requirement.

Disabled

Reduced opacity (40-60%) or grayed out. Must still show the button's label clearly (WCAG does not exempt disabled text from contrast requirements, though many implementations relax this).

Contrast Requirements

Text on Button

Button text must meet 4.5:1 contrast against the button background (or 3:1 for large text). This is often the failure point — primary colors that look vibrant may have insufficient contrast with white text.

Button on Page

The button itself must have 3:1 contrast against the page background — otherwise users with low vision may not see the button at all. A pale yellow button on a white page may fail even if the text inside is readable.

Focus Indicator

Focus rings need 3:1 contrast against adjacent colors (both the button and the page background).

Common Button Colors and Their Meanings

Blue Primary

The safest choice for primary buttons. Blue is universally associated with action and trust. Works in both light and dark mode with a simple lightness adjustment.

Green CTA

Common in e-commerce ("Buy Now," "Add to Cart"). Green suggests "go" and completion. Used in many A/B tested designs.

Red CTA

Urgency-oriented. Common in food delivery, sales and time-sensitive actions. Use sparingly — red can feel aggressive.

Orange CTA

Warm and inviting. Common in consumer products. Works well when paired with cool backgrounds.

Black CTA

Minimalist and premium. Common in luxury, tech and modern SaaS. Usually paired with off-white backgrounds.

Button Color in Context

On Colored Backgrounds

A blue button on a blue hero section is invisible. On a colored background, buttons need distinct contrast — often using white/light buttons on dark backgrounds, or dark buttons on light backgrounds.

On Images

Buttons on hero images need a solid background color (not transparency) that contrasts against the image's actual pixel values at the button's position.

In Data Tables

Action buttons in tables are usually smaller and more muted. Primary-filled buttons in every row create visual noise — use tertiary text buttons or icons instead.

Button Color Mistakes

Multiple primary buttons: If everything is primary, nothing is
No visible focus state: Keyboard users cannot navigate
Low contrast button background: Invisible against the page
Inconsistent colors for same action: "Save" should always be primary, "Cancel" should always be secondary
Relying on hover alone: Mobile users have no hover state
Not testing in dark mode: Button colors often fail

Testing Button Colors

Use a contrast checker to verify:

Button text against button background (4.5:1)
Button background against page background (3:1)
Focus ring against both (3:1)

Test every state — default, hover, active, focus, disabled — not just the default state.