Grey Font Color Printing

Question

Is there any way to ensure that my grey font colors do not turn black?

Firefox and Chrome seem to do this in order to prevent white text on black background from turning into white on white. I do not have a background color (except white), so this browser-level conversion is not useful, it only helps in preventing grey colors for no reason.

Is there a way to turn this off? Or should I just stick with techniques like opacity, browser detection, and coloring my grays...

Solution 1

Solution:

  @media print {
      h1 {
        color: rgba(0, 0, 0, 0);
        text-shadow: 0 0 0 #ccc;
      }

      @media print and (-webkit-min-device-pixel-ratio:0) {
        h1 {
          color: #ccc;
          -webkit-print-color-adjust: exact;
        }
      }
   }

Solution 2

I found had to :

1. Add !important to the css rule... and...

2. In the Firefox print dialog, tick the option for "Appearance: Print background colors"

I couldn't get it to work in Chrome.

Solution 3

Some browsers add more respect to your gray if you add color: Replace #777 with #778. Be wary of opacity. Sometimes, even if the print preview will show great results, it only actually works on select printers. Printers with unlucky firmware will fail to print your text at all if it is gray using opacity.

Solution 4

I thought that is the only div on that page. Make the following change, it should work fine.

<style>
@media print {
div.red {
      color: #cccccc !important;
  }
</style>

And change the html of the div tag like below

Solution 5

You just need to output your grey font in svg. Browsers don't change color in svg. Here's an example:

<svg height="40" width="200">
   <text font-size="28px" y="25" x="30" fill="#ffffff" >
   Some text
   </text>
</svg>

View more solutions

Comments

[SoreThumb]

For those who come after me; I am in a situation where this opacity fallback is perfect for me. I want something to show only if its color is unchanged, so I change that which can be hidden or greyed with opacity. :)

[700 Software]

Sorry, not quite accurate. Option 2 works even if Option 1 is not performed.

[matt burns]

@GeorgeBailey, that's not what I'm seeing in FireFox v24 on OSX for this page: awesometimer.com/results/nightingale_nightmare if I remove the "!important" rule the trophies are all printed black (the trophies are simply characters in fontawesome).

[700 Software]

In my Firefox, if you go to File->Page Setup, and check the box "Print Background Colors & Images", then your trophies print gray. I'm using Firefox 24 on Windows 7.

[700 Software]

It works! You're a genius! Here's a demonstration. Tested in IE11, Chrome & Firefox.

[dadasign]

make sure you don't try to use "transparent" instead of "rgba(0, 0, 0, 0)" as it will not work with IE.

[700 Software]

I wonder why I couldn't get that to work. An example page would be interesting to look at.

[Dan]

Works for me today in Chrome, but not in FF.