Information design fail

[kpreid]

I thought I knew better, but it took someone else to point out what was wrong with this display of times available for appointments:

If it happens not to leap out at you: which color indicates available, and which indicates unavailable? I knew perfectly well, of course: I drew shaded boxes to indicate the times of interest, i.e. the available ones — but the interpretation that the unavailable times are blocked off is equally plausible.

This could be solved by a legend, but that is less readable at a glance and unaesthetic. What I did — after printing several copies and then having the problem pointed out — was hand-draw arrows-to-bars (⇤⇥) vertically over the available spans. But what would have been a good clean solution to start with? What comes to mind is to eliminate the grid lines in the unavailable areas, so that only the gray-is-available interpretation provides definite start and end times.

What would you do?