Back to Tools

Email Color Contrast Checker

Check WCAG color contrast compliance for your email designs. Enter foreground and background colors to get instant accessibility ratings for normal text, large text, and UI components with real-time preview.

About this tool

About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Add in the millions of people with low vision, aging eyes, or anyone reading email on a phone in direct sunlight, and poor color contrast becomes a serious readability problem. This checker calculates the WCAG 2.1 contrast ratio between any two colors and tells you whether the combination passes for normal text (4.5:1 minimum), large text (3:1 minimum), and UI components like buttons and icons.

Understanding WCAG contrast ratios

The contrast ratio scale runs from 1:1 (no contrast — same color) to 21:1 (maximum contrast — black on white). WCAG AA compliance requires 4.5:1 for normal body text (under 18px) and 3:1 for large text (18px+ regular or 14px+ bold). WCAG AAA, the stricter standard, requires 7:1 and 4.5:1 respectively. For emails, target AA at minimum. Here's what the numbers feel like in practice: #767676 on white is exactly 4.54:1 and just barely passes. #999999 on white is only 2.85:1 — it fails, and it's one of the most common offenders in email design.

Real color examples that fail (and what to use instead)

Light gray text on white (#AAAAAA on #FFFFFF) has a ratio of just 2.32:1. Swap to #757575 for a 4.6:1 ratio that passes AA. White text on a yellow button (#FFFFFF on #FFD700) is only 1.29:1 — basically unreadable. Use dark text (#333333) on yellow instead for a 9.74:1 ratio. Another common mistake: brand-colored links. If your brand blue is #4A90D9, it only gets 3.11:1 on white, which fails for body text. Darken it to #2B6CB0 for a 5.27:1 ratio.

Dark mode and email contrast

Dark mode has made contrast testing twice as important. Email clients like Gmail, Outlook, and Apple Mail each handle dark mode differently — some invert colors automatically, some adjust backgrounds but leave text alone, and some do nothing. A color combination that passes beautifully in light mode can become unreadable when the client swaps your white background to dark gray. The safest approach is to use high-contrast combinations (7:1 or above) that survive transformation, and test with our dark mode preview tool before sending.

Building accessible emails from the start

Don't treat contrast checking as a final step — build it into your design process. Check every text-on-background combination, including CTA buttons, footer text, and preheader links. Run your full email through our accessibility checker for a complete audit that goes beyond color. And remember: making unsubscribe links intentionally low-contrast doesn't just hurt accessibility — spam filters from Gmail and Microsoft actively flag it as a deceptive practice, which can damage your deliverability score.

Frequently Asked Questions

What is a good contrast ratio for emails?

WCAG AA requires at least 4.5:1 for normal text (under 18px) and 3:1 for large text (18px+ or 14px+ bold). For emails, aim for 4.5:1 or higher for all body text, including footer links and fine print. CTA buttons need at least 3:1 between the button text and button background. If you want to be thorough, target WCAG AAA at 7:1 for body text.

Why does contrast matter more for emails than websites?

Emails are read in far more hostile environments than websites. People check email on phones in bright sunlight, on dimmed screens at night, and on tiny smartwatch displays. You also can't control the rendering — email clients may resize text, strip CSS, or invert colors for dark mode. High contrast is your insurance policy against all of these variables.

Does dark mode affect email contrast?

Absolutely. Gmail, Outlook, and Apple Mail each handle dark mode differently. Some invert your background colors while leaving text alone, which can turn a high-contrast light design into a low-contrast mess. Test your emails in both modes and use high-contrast combinations (7:1+) that survive color transformation. Avoid relying on background colors alone for readability.

What are the most common email contrast mistakes?

The top offenders are: light gray body text (#999 or lighter) on white backgrounds (only 2.85:1), white text on pastel or yellow CTA buttons (often below 2:1), placeholder text that's barely visible, and footer/unsubscribe links in intentionally faint colors. That last one is both an accessibility violation and a spam filter red flag.

What's the difference between WCAG AA and AAA?

AA is the standard compliance level — 4.5:1 for body text, 3:1 for large text. AAA is the enhanced level — 7:1 for body text, 4.5:1 for large text. Most organizations target AA as the baseline, but AAA is worth pursuing for emails since the reading environment is less predictable than a website. The practical difference: #767676 on white passes AA but fails AAA. #595959 on white passes both.

How do I check contrast for CTA buttons?

Check two contrast relationships: the button text against the button background (minimum 3:1 for large text, 4.5:1 for smaller text), and the button background against the email background (minimum 3:1 so the button itself is visible). A common failure: white text on an orange button — #FF6600 on white has 3.9:1, but white text on #FF6600 is only 3.0:1.

Should I avoid using color to convey meaning in emails?

Color should never be the only way to communicate information. If a price is shown in red to indicate a sale, also add a 'SALE' label or strikethrough on the original price. If links are only distinguishable by color, add an underline. About 8% of men can't distinguish red from green, so relying on color alone excludes a significant portion of your audience.

How do I handle brand colors that don't meet contrast requirements?

You have three options: darken the brand color slightly for text use (most common), use the brand color only for large text or decorative elements where the 3:1 threshold applies, or use the brand color as a background with properly contrasting text on top. Many major brands use a darker variant of their primary color specifically for text and links while keeping the original for logos and icons.

Compare email marketing software

Hands-on roundups to help you pick the right platform.

More Free Tools

View all tools

CAN-SPAM Compliance Checker

Verify your email campaigns meet CAN-SPAM Act requirements. Check for required elements like physical address, unsubscribe links, and proper sender identification to avoid penalties.

List-Unsubscribe Header Generator

Generate RFC 8058 compliant List-Unsubscribe and List-Unsubscribe-Post headers. Required by Gmail and Yahoo for bulk senders since 2024. Get ready-to-use headers and code snippets.

Email Accessibility Checker

Check your email HTML for accessibility issues. Analyze alt text, color contrast, font sizes, heading structure, link text, and more against WCAG guidelines.

GDPR Email Compliance Checker

Audit your email marketing practices against GDPR requirements with this interactive checklist. Check consent collection, subscriber rights, data processing, and more.

Related reading