Button Color Contrast Accessibility WCAG Checker

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:

1. Text contrast (SC 1.4.3): The text color inside the button must have 4.5:1 contrast against the button background color
2. 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 States and Contrast

Every interactive state must meet contrast requirements:

Common Button Accessibility Mistakes

1. Light blue with white text: Using blue-400 or blue-300 with white text fails WCAG
2. Gradient backgrounds: A gradient that transitions from pass to fail creates inconsistent contrast
3. Focus rings that blend: Focus indicators must be visible against both the button and the page background
4. Icon-only buttons without labels: Missing aria-label makes the button invisible to screen readers
5. Color as the only indicator: Disabled buttons relying solely on reduced opacity without other visual cues

How to Use

1. Enter your button text color in the foreground field
2. Enter your button background color in the background field
3. Check if the ratio meets 4.5:1 for normal text or 3:1 for large text (18px bold or 24px+)
4. Test each button state (default, hover, active, focus) separately
5. 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.