CTA Button Contrast Checker
Check whether your email CTA button meets WCAG accessibility standards. Preview your button in light and dark mode, and get accessible color alternatives when it fails.
No signup required. Runs entirely in your browser.
Choose Your Colors
The text on your CTA button
Your button background
Your email background
Button Preview
On Your Email Background
Dark Mode Preview
Contrast Results
Text vs Button Background
Button vs Email Background
Accessible Alternatives
These color combinations maintain your general hue while meeting WCAG AA contrast requirements.
How the CTA Contrast Checker Works
Pick your colors
Use the color pickers or type hex values for your CTA text, button background, and email body background. The tool uses the same colors your subscribers will see.
Review the ratios
The tool calculates WCAG contrast ratios using the official luminance formula and checks against all four compliance levels: AA Normal, AA Large, AAA Normal, and AAA Large.
Fix and preview
If your combination fails, the tool suggests accessible alternatives that stay close to your original colors. Preview your button on both light and dark backgrounds before finalizing.
Why CTA Contrast Matters in Email
Your CTA button is the single most important element in a marketing email. It is the moment you convert a reader into a clicker. If your button text is hard to read against the button background, or if the button itself blends into the email body, you are leaving clicks on the table.
Accessibility is not just an ethical consideration -- it is a business one. Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Low-vision subscribers are more common than most marketers realize. A button that looks fine on your high-resolution monitor may be invisible to a meaningful percentage of your audience.
WCAG contrast ratios give you an objective, measurable way to verify readability. Meeting at least AA compliance ensures your CTA is usable by the vast majority of your subscribers, regardless of their vision, screen brightness, or email client rendering.
CTA Contrast Checker FAQ
What is WCAG contrast ratio and why does it matter for email CTAs?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and its background to ensure readability for people with visual impairments. For email CTA buttons, this means the text on your button must have sufficient contrast against the button color. A ratio of 4.5:1 is required for normal text (AA level), and 3:1 for large text (18px+ bold or 24px+ regular). Poor contrast does not just hurt accessibility -- it also reduces click-through rates because subscribers cannot easily read your call to action.
What is the difference between WCAG AA and AAA compliance?
WCAG AA is the standard compliance level that most organizations target. It requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG AAA is the enhanced level, requiring 7:1 for normal text and 4.5:1 for large text. AAA is harder to achieve and not always practical with brand colors, but it provides the best readability for the widest range of visual abilities. For email CTAs, meeting AA is the minimum goal; AAA is ideal if your brand palette allows it.
How is contrast ratio calculated?
Contrast ratio is calculated using the relative luminance of two colors. First, each sRGB color channel (R, G, B) is linearized by dividing by 255 and applying a gamma correction formula. Then, relative luminance is computed as L = 0.2126*R + 0.7152*G + 0.0722*B. Finally, the contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker one. A ratio of 1:1 means no contrast (identical colors), while 21:1 is the maximum (black on white).
Why should I check my CTA button against the email background too?
Your CTA button does not float in isolation -- it sits within your email body. If your button background color is too similar to the email background, the button itself becomes invisible or hard to distinguish, regardless of how readable the text inside it is. Checking the button-to-email-body contrast ensures the button stands out as a clickable element. A ratio of at least 3:1 between the button and the surrounding email background is recommended.
What colors work best for email CTA buttons?
The most effective CTA button colors are those that contrast strongly with both the button text and the email background. High-performing combinations include white text on a bold color (blue, green, orange, red) against a white or light email body. Avoid light text on light buttons, dark text on dark buttons, or button colors that blend into the email background. Beyond contrast, consider your brand palette and the psychological associations of colors -- green for confirmation, blue for trust, orange for urgency.
More Email Tools
Contrast is one piece of the puzzle. Use our other free tools to optimize every aspect of your email campaigns.