Email Color Contrast Checker

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.