Email contrast checker
Check the contrast ratio of a text color on a background against WCAG 2.2 AA and AAA.
Email contrast checker, the tool
A large headline
Body text at 16 px, which counts as normal text.
Footer text at 12 px, which counts as normal text.
Large text is 24 px or more, or 18.7 px or more if bold.
Contrast ratio
4.54 : 1
- AA, normal text (4.5:1)
- Pass
- AA, large text (3:1)
- Pass
- AAA, normal text (7:1)
- Fail
- AAA, large text (4.5:1)
- Pass
The ratio is cut to two decimals and never rounded up, because WCAG does not round it.
Try a pair
WCAG 2.2 contrast thresholds
The sample pairs from the checker on one scale from 1:1 to 21:1. Normal text needs 4.5:1 for AA (1.4.3) and 7:1 for AAA (1.4.6); large text needs 3:1 and 4.5:1.
| Pair | Ratio | Against 3, 4.5 and 7 to 1 |
|---|---|---|
| Light gray footer text on white | 2.84:1 | |
| White button label on orange | 3.11:1 | |
| Mid gray on white | 4.54:1 | |
| Dark button label on orange | 5.76:1 | |
| Default link blue on white | 9.39:1 | |
| Light gray text on a dark footer | 11.24:1 | |
| Dark gray body text on white | 12.63:1 |
Ratios computed from relative luminance by the checker’s own function. A button label is text too: on this site’s orange, white is 3.11:1 and the ink label 5.76:1.
- Large text
- 18 point, or 14 point bold: 24 px, or about 18.7 px bold, at 96 pixels to the inch.
- Rounding
- W3C does not round the ratio, so 4.499:1 fails 4.5:1. The checker cuts the display to two decimals.
- Text in images
- The same ratios apply, to a headline in a banner as much as to body text.
- No requirement
- Logotypes, pure decoration and text on inactive controls, per the same W3C page.
A pass here is not a pass in dark mode
Some email clients change an email’s colors in dark mode. Email on Acid describes full inversion, which changes text and background, and partial inversion, which leaves most backgrounds alone, and warns that a contrast that worked in light mode can fail in dark. This checker measures the colors you enter, so send a test to the clients your list uses.
More free tools
- Email size checkerMeasure your email's HTML and see how close it is to the size where Gmail clips it.
- Subject line testerCount a subject line's characters and see how much of it each of five inbox clients shows.
- UTM builderAdd utm_source, utm_medium and utm_campaign to a link, with consistent lowercase values.
Further reading
Last verified . The sources named on this page were read that day.