I'm guessing I should plan for low resolution and big fonts? Any good examples out there?

4 Answers 4


If your site has a high contrast accessible version (such as BBC sites do) you could likely use that and the principles they use to design for projectors. Try treating the projector like a user who can't see very well.

  • Use a dark background with light text, or a light background with dark text - anything with high contrast
  • Use big, bold fonts, preferably sans-serif so there aren't any details that might make the font harder to read
  • Zoom in by using CSS rules, or just increasing the size of everything in a separate stylesheet
  • Customise the mouse pointer using CSS so it's easier to see when moving around in low contrast. The black cursor on Mac OS X is great for this.

See the BBC's Accessibility guidelines for more info.

  • Is there a way to detect that the page is being projected? Or is it ok to have a "projector mode" button on the page?
    – jiggy
    May 16, 2011 at 15:45
  • 1
    CSS2 specifies "projection" as a media type you can map styles to, browser support appears to be spotty. If not you could just put a button in there.
    – Rahul
    May 16, 2011 at 15:49

Projectors usually have quite a bad contrast ratio, so you should have hard contrasts and you shouldn't use any soft colors or gradients (they can look really nasty on projectors).

Hope that helps, Phil

  • 1
    Absolutely! I have battled endlessly with projector colors... Try using simple "bold" colors, as the projectors tend to render them that way regardless. For example, if you used a shade of red, it will most likely project as the most obnoxiously bright red possible. Good luck! May 16, 2011 at 15:29
  • 1
    Yeah me too, bad memories... presentations at customer's place ("Actually this shouldn't look like this at all..."). Argh!
    – Phil
    May 16, 2011 at 15:31
  • On a related note, a lot of DLP projectors make the color red look horrible.
    – Rain
    May 16, 2011 at 17:20

Orange and brown especially can look like feces.

General rule of thumb is to use highly contrasted colors. Dark on light (text) and vice versa. Avoid the light blue on a dark blue, etc.


If you plan on using soft colors and gradients, consider having a few print outs of the intended color, so that if and when it is rendered horribly, you can show them what it should actually look like.

Edit: Also if you have the luxury of using the projector a few minutes before the presentation, adjust its contrast, brightness and color setting if available, they are usually set to high contrast values.

2nd Edit: After learning this is a site to be mainly used on projectors, I would suggest using black and white, along with 1 bold color, to minimize the amount of poor rendering present.

  • This isn't for a demo, I'm actually targeting projectors as a main channel for viewing the site.
    – jiggy
    May 16, 2011 at 15:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.