ColorSense Blog
Color Button Combinations: High-Contrast CTA Pairings That Are Easy to Read
Five high-contrast button and CTA color combinations with verified WCAG hex codes, plus common mistakes to avoid and how to fix a low-contrast button.
The best color button combinations are easy to notice, easy to read, and clearly tied to the action you want someone to take.
A strong CTA button needs two kinds of contrast.
First, the button text must contrast with the button background.
Second, the button itself must stand out from the page around it.
For example, a cobalt blue button with white text can work well on a clean white or light gray page. A gold button with charcoal text can work well for e-commerce, creator products, and warm lifestyle brands.
The goal is not to pick the loudest button color. The goal is to make the next step obvious.
Why button contrast matters
Buttons are not just decoration. They are decision points.
A button tells the user what to do next:
- Start free trial
- Buy now
- Download guide
- Join waitlist
- Create palette
- Check contrast
If the button text is hard to read, the action feels less clear. If the button blends into the page, people may miss it completely.
This is not a small issue. WebAIM's 2026 report on the top one million home pages found that low contrast text appeared on 83.9% of home pages, making it the most common detected accessibility issue. Source: WebAIM Million 2026.
For button text, WCAG 2.2 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Source: W3C WCAG 2.2.
That means a button can look good visually but still fail in real use.
I have seen this happen with client work more than once. A brand kit looks polished in the design file, colors picked carefully, spacing tuned. Then the button goes live and it barely stands out against the hero section behind it. Nobody notices in the mockup because the eye is scanning for style, not function. It only shows up once real users start scrolling past the button without clicking it.
That gap between how a button looks in a design file and how it performs on a live page is almost always a contrast problem, not a taste problem. The fix rarely means picking a completely different color. It usually means adjusting lightness or saturation by a few percentage points until the numbers actually pass.
What makes a good button color combination?
A good button color combination has three jobs.
1. The text is readable
The text color and button background should pass WCAG contrast checks.
For most CTA buttons, aim for at least 4.5:1. If the button text is small, thin, or placed inside a busy layout, aim higher.
2. The button stands apart from the page
A blue button on a blue page may technically pass text contrast, but it can still disappear into the layout.
The button needs separation from nearby cards, backgrounds, banners, and section colors.
3. The color matches the action
Not every button needs to feel urgent.
A checkout button can use a confident, high-contrast color.
A Learn more button can be quieter.
A destructive action like Delete should not look the same as Save.
Color should help users understand the action, not just decorate the interface.
Best color button combinations with hex codes
Here are five readable CTA button combinations you can use as starting points.
Each contrast ratio is calculated between the button background and button text.
| Combination | Button background | Text color | Contrast ratio | WCAG level | Best for |
|---|
| Cobalt & White | #0052FF | #FFFFFF | 5.75:1 | AA | SaaS CTAs, app signups, software products |
| Gold & Charcoal | #FFBF00 | #1A1A1A | 10.53:1 | AAA | E-commerce, lifestyle brands, product drops |
| Emerald & White | #00875A | #FFFFFF | 4.55:1 | AA | Growth actions, dashboards, creative tools |
| Tomato & White | #E03131 | #FFFFFF | 4.51:1 | AA | Urgent actions, checkout buttons, promos |
| Indigo & Mint | #3B5BDB | #C3FAE8 | 4.90:1 | AA | Developer tools, dark-mode UI, dashboards |
These are good starting points, not universal rules. A button color that works on one layout may feel too loud, too quiet, or too close to the page background somewhere else.
Before publishing, test your final button color inside the full page design. If you want a longer copy-paste reference list, ColorSense also has a quick-reference guide of ten accessible button pairs sorted by mood.
How to choose a CTA button color
The easiest way to choose a button color is to start with the page background.
If your page is mostly white or light gray
Use a strong saturated button color.
Good options:
- Cobalt blue
- Emerald green
- Deep indigo
- Tomato red
- Charcoal
- Deep purple
A light page gives you room to use a stronger button without making the design feel heavy.
If your page is dark
Use a bright button color or a light button with dark text.
Good options:
- Gold with charcoal text
- Mint with navy text
- Sky blue with deep navy text
- Warm white with charcoal text
Dark pages already have visual weight, so the button should feel clear and clickable without becoming harsh.
If your brand palette is soft
Use one stronger action color.
For example, a brand with cream, sage, and dusty pink might use a deep plum or warm terracotta button. This keeps the brand soft while still making the action visible.
If your brand already uses bold colors
Choose one color for primary actions and keep it consistent.
Do not make every button a different bright color. That makes the page harder to scan.
A simple rule:
Use one strong color for the main CTA.
Use outline or neutral buttons for secondary actions.
How the isolation effect applies to CTA buttons
A button works better when it stands out from its surroundings.
This is often connected to the Von Restorff Effect, also called the isolation effect. The basic idea is simple: when one item looks different from nearby items, people are more likely to notice it.
In UI design, this does not mean every button should be neon.
It means your main CTA should have a distinct visual role.
If your website is mostly navy, a navy button may blend in. A gold, coral, or bright blue button may work better because it breaks the pattern.
If your website is mostly cream and beige, a charcoal, emerald, or cobalt button may create the right amount of focus.
The button should feel like the next step, not another decorative block.
Large text thresholds and why button size matters
WCAG 2.2 treats large text differently than normal text, and this changes how strict your button contrast needs to be.
Success Criterion 1.4.3 defines large text as at least 18pt, or 24px, regular weight, or 14pt, 18.66px, bold. Text at that size only needs a 3:1 contrast ratio at Level AA, instead of 4.5:1.
This matters for button design because a lot of CTA buttons use bold, medium-sized labels. A button that says Get Started in 16px bold does not count as large text. It still needs the full 4.5:1 ratio.
A button that says Start Free Trial in 20px bold does qualify as large text, so a 3:1 ratio would technically pass. In practice, most designers still aim for 4.5:1 anyway, because a button that barely passes large-text contrast can still feel weak next to the rest of the page.
There is also a separate rule for the button itself, not just the text inside it. Success Criterion 1.4.11, Non-text Contrast, requires a 3:1 ratio between the button's visible boundary, its background, border, or icon, and the page behind it. This is the rule that catches ghost buttons and outline buttons that are technically visible but easy to miss.
If your button uses an outline instead of a filled background, check the outline color against the page background using the same 3:1 threshold. A light gray outline on a white page usually fails this, even if the text inside the button is perfectly readable.
Practical rule: check text contrast, button boundary contrast, and text size together. Passing one check does not mean the button is actually easy to use.
Minimum tap target size for mobile buttons
Color contrast is not the only accessibility requirement that affects CTA buttons. Size matters too.
WCAG 2.2 introduced Success Criterion 2.5.8, Target Size Minimum, which requires interactive elements like buttons to have a target area of at least 24 by 24 CSS pixels, unless the button is inline in a sentence or has enough spacing from other targets.
A button can have perfect contrast and still be hard to use if it is too small to tap accurately on a phone. This shows up most often on mobile checkout flows, where a designer shrinks the button to fit more content above the fold.
If you are designing a CTA for both desktop and mobile, check the tap target size at the smallest breakpoint your site supports, not just the desktop version. Padding counts toward the target size, so a small label with generous padding can still meet the requirement.
A simple habit: whenever you check a button's contrast, check its tap target size on the same pass. They are graded separately, but they fail together more often than you would expect.
Button color mistakes to avoid
Mistake 1: White text on a light button
White text on yellow, mint, pale blue, or soft pink often fails contrast.
If the button background is light, try dark text instead.
Example:
Poor choice: white text on gold
Better choice: charcoal text on gold
Mistake 2: Using brand color everywhere
Your brand color does not always need to be your button color.
If your logo, headings, icons, links, and buttons all use the same blue, the CTA may not stand out. Reserve one action color for the most important click.
Mistake 3: Relying on color alone
A button should not depend only on color to communicate meaning.
The label matters too.
Submit is vague.
Create my palette is clearer.
Download the free guide tells the user exactly what happens next.
Mistake 4: Ignoring hover and disabled states
Your default button may pass contrast, but the hover state might not.
Check these states too:
- Default
- Hover
- Focus
- Active
- Disabled
Disabled buttons are often light gray with low contrast. That can be acceptable in some contexts, but users still need to understand what the button is and why it is unavailable.
A quick example: fixing a low-contrast button
Here is a common scenario. A landing page uses a soft lavender background, and the CTA button is a slightly deeper lavender with white text. It looks cohesive in the mockup, but it barely clears the contrast requirement in practice.
The fix is not to abandon lavender. It is to separate the roles. Keep lavender as the page's supporting color, and choose one button color that is clearly different in both hue and lightness. A deep indigo or a warm coral button against the same lavender background will hold its own without breaking the palette's mood.
This is the same principle interior designers use with accent walls. A room can be full of soft, related tones, but the one thing you want someone to notice, a doorway, a piece of art, a light switch, still needs to read clearly against everything around it. A button works the same way. It is the one element on the page that needs to be found instantly, not admired quietly.
Before finalizing a button color, try this on your own site:
- Open your homepage or landing page in ColorSense's website color analyzer to see your current color palette pulled directly from the live page.
- Pick out your current button color and page background.
- Run that pair through the WCAG contrast checker.
- If it fails, try two or three alternate button colors that still fit your palette, and re-check each one.
- Once you find a color that passes and still feels aligned with your brand, save it in your brand kit so every future button stays consistent.
This takes a few minutes and prevents the slow drift where five different people pick five slightly different close enough button colors over a year.
Practical CTA button palettes
Here are a few button systems you can adapt.
Clean SaaS CTA
| Role | Hex |
|---|
| Page background | #F8FAFC |
| Primary button | #0052FF |
| Button text | #FFFFFF |
| Secondary button text | #1E293B |
| Border | #CBD5E1 |
Best for: SaaS landing pages, AI tools, productivity apps
Why it works: the cobalt button stands out clearly against a soft neutral interface.
Warm e-commerce CTA
| Role | Hex |
|---|
| Page background | #FFF8ED |
| Primary button | #FFBF00 |
| Button text | #1A1A1A |
| Secondary accent | #8C3F2B |
| Text | #241A12 |
Best for: product drops, lifestyle shops, creator stores
Why it works: the gold feels energetic, while charcoal text keeps the CTA readable.
Calm wellness CTA
| Role | Hex |
|---|
| Page background | #F4F7F2 |
| Primary button | #00875A |
| Button text | #FFFFFF |
| Secondary accent | #C8D88A |
| Text | #1B2A22 |
Best for: wellness brands, habit apps, coaching websites
Why it works: the green feels calm but still clear enough for primary actions.
High-energy launch CTA
| Role | Hex |
|---|
| Page background | #FFF5F2 |
| Primary button | #E03131 |
| Button text | #FFFFFF |
| Secondary accent | #FFBF00 |
| Text | #241111 |
Best for: launch pages, limited-time campaigns, promo banners
Why it works: the tomato button creates urgency without needing heavy visual effects.
Dark mode CTA
| Role | Hex |
|---|
| Page background | #0B0F19 |
| Primary button | #63E6BE |
| Button text | #0B1F1C |
| Secondary accent | #FFD93D |
| Text | #E8FFF7 |
Contrast ratio: 11.09:1 (AAA)
Best for: developer tools, dark-mode dashboards, night-friendly reading apps
Why it works: mint against a near-black background stays legible without glowing or straining the eyes, and it does not rely on inverting a light-mode palette that was never tested for dark backgrounds.
How to check your button colors
You do not have to guess whether your button text is readable.
Use this simple process:
- Pick your button background color.
- Pick your button text color.
- Test the pair in a WCAG contrast checker.
- Check the button on the actual page background.
- Test hover, focus, active, and disabled states.
- Save the approved button colors in your brand kit.
ColorSense can help with this workflow:
The best button color is the clearest one
A good button color does not need to be trendy. It needs to be clear.
The strongest CTA buttons usually do three things well:
They stand out from the page.
They keep the text readable.
They make the next action obvious.
That is why contrast matters. It turns color from decoration into a decision system.
When your button color has a clear job, your interface becomes easier to scan, easier to trust, and easier to use.
What is the best color for CTA buttons?
There is no single best CTA button color. The best choice depends on your page background, brand palette, and button text color. A strong CTA button should stand out from the page and pass WCAG contrast requirements.
What button colors have good contrast?
Cobalt blue with white text, gold with charcoal text, emerald with white text, and tomato red with white text can all work well when the contrast ratio is checked. Always test the exact hex codes before publishing.
Is white text on a colored button always accessible?
No. White text works on dark or saturated button colors, but it often fails on light colors like yellow, mint, pale blue, or soft pink. Light button backgrounds usually need dark text.
What contrast ratio should button text have?
For WCAG Level AA, normal button text should have a contrast ratio of at least 4.5:1. Large text needs at least 3:1. For AAA, normal text needs 7:1 and large text needs 4.5:1. Source: W3C WCAG 2.2.
Should my CTA button match my brand color?
Not always. If your brand color is already used across your logo, headings, icons, and links, using the same color for your button may make the CTA blend in. Many brands use a dedicated action color for primary buttons.
Does button contrast affect SEO or conversion?
Contrast does not directly affect search rankings, but it affects usability, and usability influences engagement signals that search engines do factor in, like time on page and bounce rate. As for conversion, a more readable button can help, but claiming a specific lift requires your own A/B test data. Treat contrast as a baseline usability requirement, not a guaranteed conversion tactic.
Try it now
Check any color pair against WCAG — free, no signup
Pick a foreground and background, see the exact contrast ratio plus AA/AAA verdicts for normal and large text. One click auto-fixes a failing pair while keeping your hue.
Open WCAG Contrast Checker →