Accessible Button Color Combinations
Measured button text and fill color combinations for primary, destructive, success, and quiet UI actions.
Button state checklist
Check default, hover, pressed, focus, loading, and disabled states separately. A button that passes in one state can fail after opacity, tint, or hover changes.
- White text usually needs a sufficiently dark fill color.
- Outline buttons need enough contrast for both the label and the border.
- Do not rely on color alone to signal destructive or disabled actions.
Button Examples
Primary action
Continue with this primary action style for forms and checkout flows.
Destructive action
Use destructive colors sparingly and pair them with explicit labels.
Success action
Useful for confirmation flows, publishing actions, and completed states.
Quiet secondary
Good for secondary actions on light application surfaces.
FAQ
How should I use this button color reference? v
Use it as a starting point, then test the exact foreground, background, and UI state colors in the context where they will appear.
Are the HEX values ready to copy? v
Yes. The listed values are formatted for CSS, design files, and token documentation.
Should I still check contrast? v
Yes. Any color used for text, icons, controls, or status messages should be checked against its actual background.
Related Color Tools
Open the next tool for this color task.
Color Contrast Checker
converterCheck text and background colors against WCAG ratios.
WCAG AA Color Pairs with HEX Values
educationalPractical AA text and background color pairs.
Accessible Color Combinations for Readable UI
educationalUse accessible color combinations with measured contrast examples for buttons, text, surfaces, and status states.
Accessibility Color Tools - Contrast & WCAG
tool-hubContrast tools and measured accessible color examples.