Edge is incapable of printing text colors correctly

Issue #12399195 • Assigned to Christian F.


Jeff B.
Jun 20, 2017
This issue is public.
Found in
  • Microsoft Edge
Standard affected
CSS Print Profile

Reported by 2 people

Sign in to watch or report this issue.

Steps to reproduce

Both IE and Edge adjust text colors when printing. For example, yellow becomes an ugly brownish-green. No other browsers - not Chrome, not Firefox, not Safari, not Opera - have this non-standard behavior.

In IE, there was a workaround: you could check "print background colors and images", and colors would print correctly.

However, Microsoft has chosen to not include the “print background colors and images” feature in Edge. Complaints about that have been ignored:

No other known workaround - using @media print queries, using print-color-adjust CSS, not text-fill-color CSS, not shadows - will cause colors to print correctly.

So, it seems to be impossible to print text colors correctly from Edge.

Here is sample code demonstrating the problem:
<!DOCTYPE html>
<title>Edge Color Test</title>
.color_only { color: yellow; }
@media print { .print_and_color { color: yellow; } }
@media print and (color) { .print_color_color { color: yellow; } }
.print_color_adjust { color: yellow; print-color-adjust: exact; }
.webkit_print_color_adjust { color: yellow; -webkit-print-color-adjust: exact; }
.ms_print_color_adjust { color: yellow; -ms-print-color-adjust: exact; }
.text_fill_color { -webkit-text-fill-color: yellow; text-fill-color: yellow; }
.shadow_hack { color: transparent; text-shadow: 0px 0px 0px yellow; }
<h1 class="color_only">.color_only { color: yellow; }</h1>
<h1 class="print_and_color">@media print { .print_and_color { color: yellow; } }</h1>
<h1 class="print_color_color">@media print and (color) { .print_color_color { color: yellow; } }</h1>
<h1 class="print_color_adjust">.print_color_adjust { color: yellow; print-color-adjust: exact; }</h1>
<h1 class="webkit_print_color_adjust">.webkit_print_color_adjust { color: yellow; -webkit-print-color-adjust: exact; }</h1>
<h1 class="ms_print_color_adjust">.ms_print_color_adjust { color: yellow; -ms-print-color-adjust: exact; }</h1>
<h1 class="text_fill_color">.text_fill_color { -webkit-text-fill-color: yellow; text-fill-color: yellow; }</h1>
<h1 class="shadow_hack">.shadow_hack { color: transparent; text-shadow: 0px 0px 0px yellow; }</h1>

Open that HTML code in any browser and print it. In every non-Microsoft browser, it will print correctly. In both IE and Edge, text will print in the wrong color. In IE, you can work around it by checking "print background colors and images". In Edge, there is no workaround.


1 attachment

Comments and activity

  • Microsoft Edge Team

    Changed Assigned To to “James M.”

    Changed Assigned To to “Rick J.”

    Changed Assigned To to “Christian F.”

You need to sign in to your Microsoft account to add a comment.

Sign in