Check Button Color Contrast
Buttons are the most common accessibility audit failure after color contrast in text. A button that fails contrast requirements blocks users from completing tasks, submitting forms, or navigating your application. This example tests white text (#ffffff) on a standard blue button (#3b82f6).
Why Button Contrast Is Tricky
Buttons have two separate contrast requirements that are often confused:
- Text contrast (SC 1.4.3): The text color inside the button must have 4.5:1 contrast against the button background color
- Non-text contrast (SC 1.4.11): The button’s visual boundary must have 3:1 contrast against the adjacent background (the page or card behind it)
A button can pass text contrast but fail non-text contrast, or vice versa. You need to check both.
The Blue Button Problem
Most design systems use blue as the primary button color. Here is how common blue shades perform with white text:
| Button color | White text ratio | WCAG AA | Notes |
|---|---|---|---|
| #3b82f6 (blue-500) | 4.56:1 | Passes | Barely passes, no margin |
| #2563eb (blue-600) | 6.44:1 | Passes | Recommended minimum |
| #1d4ed8 (blue-700) | 8.59:1 | Passes | Good for primary CTAs |
| #60a5fa (blue-400) | 2.73:1 | Fails | Common mistake |
| #93c5fd (blue-300) | 1.47:1 | Fails | Never use with white text |
Button States and Contrast
Every interactive state must meet contrast requirements:
| State | Foreground | Background | Ratio | Pass? |
|---|---|---|---|---|
| Default | #ffffff | #3b82f6 | 4.56:1 | AA passes |
| Hover | #ffffff | #2563eb | 6.44:1 | AA passes |
| Active | #ffffff | #1d4ed8 | 8.59:1 | AA passes |
| Disabled | #94a3b8 | #cbd5e1 | 1.46:1 | Exempt |
| Focus ring | #ffffff | #1e40af | 10.03:1 | AA passes |
Common Button Accessibility Mistakes
- Light blue with white text: Using blue-400 or blue-300 with white text fails WCAG
- Gradient backgrounds: A gradient that transitions from pass to fail creates inconsistent contrast
- Focus rings that blend: Focus indicators must be visible against both the button and the page background
- Icon-only buttons without labels: Missing aria-label makes the button invisible to screen readers
- Color as the only indicator: Disabled buttons relying solely on reduced opacity without other visual cues
How to Use
- Enter your button text color in the foreground field
- Enter your button background color in the background field
- Check if the ratio meets 4.5:1 for normal text or 3:1 for large text (18px bold or 24px+)
- Test each button state (default, hover, active, focus) separately
- Use the accessible color suggestions to find better combinations
Testing the Full Button Stack
Buttons rarely exist in isolation. Check every variant in your design system: primary, secondary, outline, ghost, and disabled. The CSS Gradient tool can help you generate button backgrounds, but always verify the final contrast ratio with the WCAG Contrast Checker before shipping.