10 Button Color Combinations That Pass WCAG (Copy-Paste HEX)

Beautiful buttons that fail contrast are a daily designer headache. Here are 10 accessible combinations with HEX codes you can paste directly into your stylesheet — no guessing required.

The hardest part of accessible button design isn't knowing the rules — it's finding combinations that pass WCAG AA and look good on your brand. Below are ten button color combinations (background + text) that all pass at least AA Normal contrast (4.5:1 or higher), grouped by personality. Copy any of them into your design system and move on with your day.

Bold and Confident (High Contrast, High Saturation)

1. Electric Indigo — Background #4F46E5, Text #FFFFFF (contrast ratio: 6.8:1). Modern SaaS standard, reads as trustworthy and energetic. 2. Crimson Sale — Background #DC2626, Text #FFFFFF (5.2:1). Use for urgent CTAs (limited offers, "Buy now"), not for default actions. 3. Forest Action — Background #15803D, Text #FFFFFF (5.7:1). Reads as confirming, finishing, success-adjacent. Strong on wellness, fintech, and sustainability brands.

Warm and Approachable (Editorial, Lifestyle, DTC)

4. Terracotta Calm — Background #C2410C, Text #FFF7ED (5.8:1). Sophisticated warm-earth tone, works well for editorial and food brands. 5. Sunset Gold — Background #92400E, Text #FEF3C7 (7.4:1, passes AAA). Premium and slightly nostalgic — good for hospitality and travel. 6. Soft Plum — Background #86198F, Text #FAE8FF (7.1:1, passes AAA). Distinctive without being aggressive, suits creative and beauty brands.

Cool and Professional (Tech, B2B, Financial)

7. Navy Trust — Background #1E3A8A, Text #FFFFFF (10.1:1, passes AAA). The default for financial services and B2B — almost impossible to misuse. 8. Slate Authority — Background #334155, Text #F1F5F9 (9.3:1, passes AAA). Quiet, premium, design-system-friendly. 9. Teal Innovation — Background #0F766E, Text #FFFFFF (5.4:1). Less common than navy, distinctive without being alternative.

Light Backgrounds (When You Need a Soft Button)

10. Cream on Charcoal Text — Background #FEF3C7, Text #451A03 (12.4:1, passes AAA). For secondary actions or light-mode systems where a colored background button would feel too aggressive. The ratio is high enough that you can also use it on bold large text in body content.

How to Adapt These to Your Brand

None of these are likely to be your exact brand color. The pattern that matters: a saturated dark and a very light text, or a very light background and a saturated dark text. Pick the combination closest to your brand personality, then re-check the pair you actually want to use through the contrast checker before shipping. If your brand color sits awkwardly in the middle of the lightness range (a mid-tone green, a medium blue), it likely won't pass on its own — use it for borders and accents, and pull a darker shade from the Palette Maker for the actual button surface.

Hover, Focus, and Disabled States Need the Same Check

The button color you check is almost always the default state — but buttons have three or four other states that each ship to production: hover, focus (keyboard navigation), active (pressed), and disabled. Each state typically uses a slightly different background color, and each needs the same contrast check against its text. The most common failure: a hover state that darkens (or lightens) the background by 10–15%, accidentally dropping below AA contrast against the unchanged white text. Disabled states are the worst offender — designers commonly drop opacity to 40–50% on a colored button to indicate "disabled," and the resulting text-on-background contrast often fails AA dramatically. The accessibility-friendly approach is to use a neutral grey for disabled buttons (with text in a darker grey that still passes 3:1 minimum) rather than a faded version of your CTA color. Run all four states for each button through the contrast checker before locking your design system — disabled states that fail are particularly bad because users may not realize the button is unavailable rather than just hard to read.

Document Button Specs in Your Brand Kit

Every button decision you make once should live in a documented spec, not in the head of whoever designed it last. Three things to capture per button type: (1) the exact HEX codes for every state (default, hover, focus, active, disabled), (2) the contrast ratios for each state against the button's text color (so future designers can see which states are on the AA floor versus comfortably above), (3) the typography spec (font weight, size, padding) that creates the AA Large vs AA Normal threshold. Use your Brand Kit as the canonical reference — paste the HEX values and contrast ratios directly into the document so any team member can look up "what's our primary button hover color?" in 10 seconds instead of having to dig through old design files or DM the designer.

Extract a palette in seconds — no signup

Upload any image and ColorSense pulls 5 vibrant brand-ready colors with HEX, RGB, and HSL codes. Free, unlimited, no account required.

Open ColorSense →