Use one accent among your email signature colors and let everything else be neutral. Then check the accent as text: the W3C asks for a contrast ratio of at least 4.5 to 1 for ordinary text, and a bright brand color on white often falls short of that, so you darken the text shade and keep the original for fills.
Every ratio on this page is our calculation, using the formula published on the W3C’s contrast page, which we opened in October 2026 along with its page on non-text contrast and Microsoft’s page on accessible Outlook email (linked in the check below). Colors for emailfooter’s themes come from its engine code. We did not test any signature with a person who has low vision, and we found no vendor page on how Gmail or Outlook recolor a message.
Email signature colors: three rules
- Count: one accent, plus a dark name color, a grey for body text and a pale grey for rules.
- Contrast: 4.5 to 1 for text under 18 point, 3 to 1 for large text and for icons.
- Dark mode: no single color passes 4.5 to 1 on both white and a dark background, so keep a second set.
How many email signature colors to use
Our rule of thumb: one chromatic color in the type and rules, three neutrals, and whatever colors your logo already has. A second accent doubles your checking, because every color in text needs its own contrast test on white and again on a dark background.
emailfooter shows how small that budget is. Each of its 24 themes sets six roles, and in the light version only one role is a real color.
| Role | Light value | Used for |
|---|---|---|
| Name | A near-black tinted to the theme, such as #1a2233 | The largest line |
| Title and accent | The theme color, such as #3b5bdb for Royal | The title line, the accent bar, the icons |
| Body | #4a5568 | Contact lines |
| Divider | #e2e8f0 | Rules between blocks |
| Background | #ffffff | The page behind it |
If your logo has two brand colors, pick the one with better contrast for the accent and let the other live in the logo only. Our guide to email signature design covers the layout side, and email signature fonts covers type.
The contrast numbers behind email signature colors
The W3C’s criterion 1.4.3 sets 4.5 to 1 for text, 3 to 1 for large text (at least 18 point, or 14 point bold), and no requirement for text that is part of a logo or brand name. It says the ratios are thresholds: a computed 4.499 to 1 does not pass, and you do not round up. Our figures below are cut, not rounded, for that reason.
Sizes matter. A 13 pixel line is about 9.75 point, so it is ordinary text. emailfooter draws the name in bold at 1.5 times the base size, which is 20 pixels, or 15 point, so the name counts as large text. In the Compact layout the name is the base size plus 2, 15 pixels, which does not.
Contrast table for email signature colors
These twelve are made-up brand shades, not anyone’s real brand, so the table stays neutral. The last two columns show the darker shade we found by mixing the color with black in 5 percent steps until it passed 4.5 to 1 on white.
| Shade | Hex | On white | On dark #131a28 | Text-safe on white | Its ratio |
|---|---|---|---|---|---|
| Orange | #ff6600 | 2.93 | 5.93 | #bf4d00 | 4.91 |
| Amber | #f5a623 | 2.02 | 8.59 | #9f6c17 | 4.53 |
| Sky blue | #00a1e0 | 2.92 | 5.94 | #0079a8 | 4.88 |
| Green | #2ecc71 | 2.10 | 8.28 | #1e8549 | 4.66 |
| Pink | #e91e63 | 4.34 | 4.00 | #dd1d5e | 4.75 |
| Teal | #17a2b8 | 3.04 | 5.71 | #128293 | 4.52 |
| Lime | #8bc34a | 2.09 | 8.29 | #5a7f30 | 4.65 |
| Red | #ff4d4f | 3.26 | 5.32 | #cc3e3f | 4.85 |
| Royal blue | #2f5fd0 | 5.72 | 3.04 | none needed | 5.72 |
| Purple | #7b3fa0 | 6.86 | 2.53 | none needed | 6.86 |
| Navy | #1e3a6e | 11.13 | 1.56 | none needed | 11.13 |
| Charcoal | #333333 | 12.63 | 1.37 | none needed | 12.63 |
Read it in two passes. The first eight fail on white as text, so use the text-safe shade for the title line and keep the bright original for a bar or a logo fill. The last four pass on white but fail on dark, which is the next section’s problem. Use the darker shade for text only. Our article on an accessible email signature has a table for greys and text pairs.
Why no single color wins on both backgrounds
White against emailfooter’s dark preview background (#131a28) is 17.41 to 1. Take the square root and you get 4.17. That is the best any one color can do on both, because a color’s ratio depends only on its luminance, and the middle luminance splits the gap evenly. It is below 4.5, so no color passes for ordinary text on both. Pure black as the dark background raises the ceiling to 4.58, which leaves almost no room.
So the options are a second set of colors for dark mode, or a larger text size so the 3 to 1 rule for large text applies. emailfooter keeps a dark accent for each theme. We checked all 24 against #131a28, and they range from 5.70 (Wine) to 10.37 (Mint).
| Theme | Accent on white | Dark accent | On dark |
|---|---|---|---|
| Royal | #3b5bdb, 5.66 | #7f9cff | 6.71 |
| Navy | #1e3a6e, 11.13 | #7da2e8 | 6.80 |
| Wine | #8a1c3c, 9.08 | #e0708f | 5.70 |
| Slate | #51647a, 6.08 | #98aac0 | 7.33 |
| Moss | #5c7a29, 4.91 | #a2c75c | 9.00 |
| Cocoa | #6f4e37, 7.44 | #c9a285 | 7.45 |
The catch is that a second set only helps where the mail app honors it. Google’s CSS support page, updated on 15 September 2026, lists media queries on screen width, orientation and resolution, and the dark color scheme query is not among them. Test in the apps your readers use. Our dark mode article shows the routine.
Icons, rules and bands in email signature colors
WCAG 1.4.11 asks 3 to 1 against adjacent colors for user interface components and for parts of graphics needed to understand content. Our reading is that a social icon which identifies a link falls under that, so a pale icon on white is a fault. A divider carries no information, so we treat it as decoration. The default #e2e8f0 on white is 1.23 to 1, and that is on purpose.
The Ribbon layout puts the name and title in white on a band of the accent. From the engine code, it picks white or near-black by a brightness test, and for all 24 themes it picks white. White on an accent has the same ratio as the accent on white, so the Ribbon title line (13 pixels, ordinary text) fails for the same eleven themes that fail on white. The bold name passes the 3 to 1 test for large text except on Amber (2.98) and Sky (2.77). The title line also carries a slight transparency that we did not calculate.
The Wide layout sets contact lines in #4a5568 on a tint made from 7 percent of the accent. We worked it out for six themes, and the result stays between 6.65 and 7.03.
Three email signature colors compared, drawn
Navy in the Ribbon layout passes everything, at 11.13 to 1 for white on the band.
|
Navy ribbon: white text on the band at 11.13 to 1 (our calculation). Example only. The firm and person are made up.
Next, the same words in two accents from the same family. Olive draws the title in #6b8e23, which is 3.80 to 1 on white.
|
Olive accent: the title line is 3.80 to 1 on white, below 4.5 (our calculation). The layout differs from the next example. The firm and person are made up.
Moss draws it in #5c7a29, 4.91 to 1, and the logo tile keeps the livelier olive.
|
Moss accent: the title line is 4.91 to 1 on white (our calculation), with the olive logo kept as it is. The firm and person are made up.
A check for your email signature colors before you roll out
- List every color in text, icons, rules and bands, including the logo’s.
- Compute each text pair on white with the W3C formula, and write the result down. Do not round up.
- Darken the text shade until it passes, keeping the bright original for fills.
- Pick a lighter shade for dark mode and check it on your dark background.
- Underline links that rely on color alone. Microsoft’s accessibility page suggests underlining color-coded hyperlink text so colorblind readers know it is a link.
For a team, emailfooter lets the company admin pick a theme or set each color role by hand, so every employee starts from the same checked set. Employees still install the signature in their own mail app, and the dark colors only help in apps that read them. Choosing email signature colors once, and checking them twice, beats fixing fifty copies.
Frequently asked questions
How many colors should an email signature have?
Our rule of thumb is one accent plus neutral greys, and whatever is already in your logo. More than that multiplies the contrast checks.
What contrast ratio do email signature colors need?
The W3C asks for 4.5 to 1 for ordinary text, 3 to 1 for large text, and 3 to 1 for icons that identify a link. A 13 pixel line is ordinary text.
Can I use my brand colors in an email signature?
Yes, in the logo, where the W3C sets no contrast requirement. For text, use a darker shade of the brand color if the original is below 4.5 to 1 on white.
What are the best email signature colors?
There is no single best. Navy, charcoal and purple in the table pass on white with room to spare, but they fail on a dark background without a second set.
Do email signature colors change in dark mode?
Only if the mail app applies dark colors. Test in the apps your readers use, since we found no vendor page that says how Gmail or Outlook recolor a message.
Keep reading
- Email signature design: layout, spacing, colour and hierarchy rules: Email signature design as a one-page spec: width, grid, type scale, spacing and colour count, plus two before-and-after redesigns and a contrast check.
- Email signature fonts: a safe list, fallbacks and a size scale: Email signature fonts compared: eight safe picks checked against Windows 11 and macOS font lists, the fallback stack each one uses, and a clear size scale.
- Accessible email signature: alt text, contrast and screen-reader order: An accessible email signature needs readable colours, useful alt text and clear links. A checklist mapped to WCAG success criteria, with contrast numbers.
- Email signature in dark mode: fix invisible logos and unreadable text: Email signature dark mode fixes: why logos vanish and text fades, how to repair both, and a test routine for Gmail, Outlook and Apple Mail.
Make every signature in your company match
emailfooter is a free WordPress plugin. You design the signature once, and each person adds their own details and installs it in their mail app. Prefer not to run a website? emailfooter Managed is the same software, hosted for you.