Incorrect text colors when printing HTML page

Question

Why do browsers change the color of text when printing?

For example, create a blank HTML document containing:

<span style="color: #80b831">test</span>
<button onclick="window.print()">Print</button>

Example here: http://jsfiddle.net/7z6c2/

The span has color: #80b831 on the screen, but when printed (even just print preview in Chrome) the color is different (lime greenish).

If I tick Chrome's "Background colors and images" option in Print Preview, the correct color is then used.

What's happening here? How can I get the right color to appear by default? Is this something to do with "web-safe" colors?

Answer 1

Check this Fiddle

You have to use -webkit-print-color-adjust on the element which you are going to print

Also check here to know more about print color adjust https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust