Don’t Rely on Background Colors Printing

Avatar of Chris Coyier
Chris Coyier on (Updated on )

At work I recently rolled out a new system for one of our clients, the Rick Wilcox Magic Theater. Their site is largely informational about them and their show, and a portal for selling tickets to their show online. As their theater is part of a vacation destination, people often buy tickets far in advance. The best method for presenting their show schedule is literally in a calendar format where people can see months of show dates at a single glace.

This has always been a popular page for their customers to print out. For a long time, what we did was offer a PDF to download that we kept up to date with the current show dates. This allowed for some nice design control, but was very cumbersome to update all the time. So when rolling out the new version, I figured this was the ideal time to build in a page that was designed for printing, that kept itself up to date dynamically with the rest of the calendar.

On the web, you can count on people’s monitors displaying color (thank god). We make good use of this when displaying the show calendar on the web. My first attempt a print stylesheet was great I thought. It set type in points, fit nicely onto one page, eliminated everything but the necessary information, and looked good doing it. All except one fatal flaw: it relied on color.

There are two problems with this:

  1. Not everyone has a color printer.
  2. Backround colors and images don’t print by default.

Yes, it is a printer option your users could change, but you absolutely can’t count on your users knowing or doing that. You cannot control this from the web side (as far as I know).

Solution: figure out a way to go black and white

One solution would have been to go with a list-style presentation that wouldn’t need colors to distinguish show times. We were really liking the calendar-style presentation though, so what we needed was a way to distinguish show times in the limited confines of a day table cell without needing color.

CSS borders to the rescue!

Surely it’s not as pretty as the colored solution, but it certainly does the job!