Print Light-colored Text As Dark Text In Chrome

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 c

Solution 1:

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/