Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Outlook 2010 ignoring color on inline elements with dark background #82

Open
M-J-Robbins opened this issue Jun 30, 2020 · 2 comments
Open
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com

Comments

@M-J-Robbins
Copy link
Contributor

Outlook 2010 appears to be overriding color that is set on any inline elements that have a dark background-color.

<span style="background: #000;color: #f00">span</span>
We'd expect the above code to have a black background and red text. It does this on every other email client, but on Outlook 2010 it shows white text. Other versions of Outlook appear to work as expected.

This is only happening for inline elements, such as <span>, <a>, <strong>, <b>, <font>, etc. When applied to a. block element it works as expected.

This is only happening on very dark backgrounds, setting background:#333333 changes the text colour to white, setting background:#444444 keeps the text colour that has been set. I'm guessing this is an accessibility setting to maintain contrast on text, however even setting a light text colour with a good contrast ratio will still get changed.

This is an edge case, backgrounds are not often set on inline elements and this only happens with dark backgrounds. The most likely use case where we'd see this is on link buttons.

@M-J-Robbins
Copy link
Contributor Author

This is only when the background is set directly on the inline element

	<div style="color:#f00;background: #000">
		test1
		<span style="color:#f00;background: #000">test2</span>
		<span style="background: #000">test3</span>
		<span style="color:#f00;">test4</span>
		<span>test5</span>
	</div>

In the above example, test2 and test3 are converted to white text, the others all stay red.

@hteumeuleu hteumeuleu added the Outlook Windows, macOS, iOS, Android and Outlook.com label Jun 30, 2020
@M-J-Robbins
Copy link
Contributor Author

I've run tests on all of these so far, and no luck yet
color
background
background-color
bgcolor=""
mso-color-alt
mso-color-index
mso-color-source
mso-fills-color
mso-foreground
mso-highlight
mso-pattern
mso-pattern-color
mso-scheme-fill-color
mso-shading
navbutton_background_color
font-color
mso-background

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Outlook Windows, macOS, iOS, Android and Outlook.com
Projects
None yet
Development

No branches or pull requests

2 participants