White type on a coloured panel that stays readable on paper

What actually happens

Reversed type is not ink on paper, it is the absence of ink in the shape of a letter. Two things then work against it. Ink spreads slightly as it is absorbed, so the gap that forms each letter closes a little, and thin strokes and small counters fill in. And where the panel is made of more than one ink, any registration shift moves the edge of one colour into the gap, so the letter picks up a coloured halo on one side. The result is that reversed type needs to be larger, heavier and more open than the same text set positively, and a design that reverses 8 point text out of a four-colour panel is unreadable on paper while looking perfectly fine on the screen it was designed on.

Where this API stands on colour

This API renders HTML to PDF, and the colour in the output is the colour in your CSS, which is RGB. There is no colour-space option, no CMYK mode, no ICC embedding, no ink-limit control and no greyscale conversion. Two options touch colour at all and neither changes a colour value: print_background, which is on by default here and off by default in most renderers, decides whether backgrounds and background images are painted at all, and media decides whether your print stylesheet applies. Anything that converts this document into inks happens after the render, in a tool you choose, and that is where the decisions on this page are enforced.

The decisions that avoid it

Reasons rather than a description of the code. Each of these is a choice with a wrong answer, and the wrong answer usually looks correct on a screen.

• Set reversed type larger and heavier than you would positively. A weight that is comfortable in black on white is too light knocked out.
• Avoid typefaces with fine hairlines and tight counters for reversed text. A high-contrast display face loses its thin strokes entirely.
• Reverse out of a single ink where you can. A knockout from one colour has no registration to go wrong.
• Never reverse small text out of a photograph. The contrast varies across the letterforms and there is no value you can choose that works over the whole area.
• Remember that a knocked-out panel is a background, so it is the first thing to disappear when backgrounds are not printed, taking the white text with it and leaving nothing.
• Give the panel enough padding that no letter sits near the edge, where any shift in the panel position clips it.

In the stylesheet

Where the decision is expressible in CSS, this is what it looks like. Where it is not, the snippet says so rather than inventing a property.

.reversed {
  background: #1d1812;
  color: #ffffff;
  /* larger and heavier than the same text would be positively */
  font-size: 11pt;
  font-weight: 600;
  letter-spacing: 0.01em;      /* opens the counters slightly */
  padding: 6mm 7mm;            /* nothing near the panel edge */
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* The fallback that matters: if the panel does not print, white text on
   white paper is invisible. Give the block a dark text colour that only
   applies when the background is gone. */
@media print {
  .reversed { border: 1pt solid #1d1812; }
}

What people do instead

Reversing type out of a panel and relying on the panel printing. Backgrounds are dropped by print settings routinely, and when the panel goes the white text goes with it, leaving a blank rectangle where the most emphasised content on the page was. Every other failure in this document is a legibility problem; this one is total.

How to find out rather than assume

Print the page twice, once with backgrounds on and once off. With them on, read the smallest reversed text at arm's length. With them off, confirm the content is still present in some form rather than invisible. If the second print shows a gap, the design depends on something it cannot depend on.

Frequently asked

Related colour and ink topics

The topics that cause each other, then the rest of the same group.