Button Color Contrast Checker
Check if your button text is readable against its background. Buttons are the most interacted-with elements on your site — every user needs to be able to read them. Whether you're designing a primary CTA, a secondary outline button, or a disabled state, use this tool to ensure WCAG compliance.
Contrast Ratio
Large text (≥19px bold): only needs 3:1 for AA
URL Scanner
Scan any site for WCAG issues
Pick a seed color and get WCAG-compliant harmonies.
This feature is not yet available. We're actively building it — if you'd like early access or have ideas to share, reach out and we'll prioritize your needs.
Contact UsFrequently Asked Questions
What contrast ratio do buttons need for WCAG compliance?
Button text normally requires a 4.5:1 contrast ratio against the button background to meet WCAG AA standards for normal text. However, if the button text is at least 19px bold or 24px regular, the requirement drops to 3:1 (AA Large). Most primary CTA buttons with 16-18px text need the full 4.5:1, so test carefully with our checker and adjust if needed.
Do outline and ghost buttons need different contrast ratios?
Yes — outline and ghost buttons have unique considerations. For outline buttons, the text color against the background must still meet 4.5:1 (or 3:1 for large text). But the button border itself is a meaningful non-text component, so the border needs at least 3:1 contrast against the page background (WCAG 2.1 SC 1.4.11). Many outline buttons fail because the border is too faint even when the text passes.
What's the best contrast ratio for a call-to-action button?
While WCAG AA requires a minimum of 4.5:1 for normal button text, aiming for 7:1 or higher (AAA) is strongly recommended for CTAs. Your call-to-action is arguably the most important interactive element on the page — it should be immediately readable by everyone, including users with low vision, older adults, and anyone viewing the site in bright sunlight. A CTA that barely passes AA risks being missed by users who'd benefit from your product or service.
How should I handle disabled button contrast?
Disabled buttons are an interesting exception in WCAG. The contrast requirements for text do apply to disabled buttons if the text conveys information. However, if the disabled state simply indicates non-interactivity and doesn't convey functional information, WCAG 2.1 allows reduced contrast. Best practice is to keep disabled buttons at a minimum of 3:1 for the text and use a clear secondary indicator like changing the cursor to not-allowed or adding a tooltip explaining why the button is disabled.