Print Light-Colored Text as Dark Text in Chrome

Question

I am developing a web page that has light colored text on a dark background. When I try to print the page in black and white, the browser seems to automatically be inverting the colors so that it doesn't take a full cartridge to print. This is exactly what I was hoping for.

When I try to print in Firefox, the text is converted to a fully solid black. In Chrome, however, the text appears faint, and that is making it hard to read. Chrome still prints page numbers, time stamps, etc in the full solid black. How can I get Chrome to print the text on my page in that same full solid black?

Here's a sample showing the exact colors I'm using, and it reproduces the behavior I'm seeing on my actual page.

<body>
    <form id="form1">
    <div>
        <table style="background-color:#2D3541; width:900px; height:900px">
            <tr>
                <td style="font-size:medium; text-align:center; color:#B7DBFF">Sample Text</td>
            </tr>
        </table>
    </div>
    </form>
</body>

score 3 · Accepted Answer · answered Feb 25 '16 at 15:26

What you can do is create what's known as a Print Stylesheet. This is a normal css stylesheet loaded in only when the user tries to print the web page in question. Normally browsers will aim to ignore certain CSS attributes which could lead to large amounts of ink being wasted (say the page has a background colour) and convert text to darker colours by assuming the background is white.

This can be overridden by creating a new print stylesheet <link rel="print" href="/css/print.css" or using media query @media print {...}

I find using a separate print stylesheet preferential as browsers won't load it until the user is intending to print the page.

by specifying the color of the the text that's causing issue in your print stylesheet or media query, you should be able to resolve issues where browsers aren't picking up your text style rules. If you're overriding a value set in another stylesheet, experiment with the use of !important if using a print stylesheet alone doesn't help things.

Ideally you should give your td a class to give you more granular control. Values in the style attribute take a higher priority than stylesheets, and Chrome may still be honouring the inline style attribute when the page is printed.

@media print {
    .light {
        color: #000 !important;
    }
}

Smashing Magazine has some great resources on print styles:

https://www.smashingmagazine.com/2011/11/how-to-set-up-a-print-style-sheet/

I'm trying this a few years later and it's not working at all for me. White text on black background converts to grey no matter what styles i put in there, even with print media queries and !important — TKoL, Sep 06 '19 at 10:41

Print Light-Colored Text as Dark Text in Chrome

1 Answers1

Linked