If you’re a designer at a tech company, you’re probably equipped with state-of-the-art pixel-pushing technology. I’m typing this now on a MacBook Pro with Retina display, where I use Sketch and Adobe Creative Suite (I’m still clinging to Fireworks like a life preserver) for all my design tasks. Our team’s mockups look beautiful and crisp on my Retina screen’s vast landscape of perfect pixels. That is, of course, until we congregate in a meeting room, plug a VGA adapter into my laptop, and see these designs projected onto a fuzzy, washed-out, low-resolution screen. The worst!

My team spending the first half of a meeting adjusting the projector settings

How many times have you been in a meeting where a design looked strange but was waved away with “Oh, that’s just the projector”? I personally have lost count. Just yesterday, sitting eight feet away from a fairly high-quality projector screen, I felt like I was at the optometrist’s office getting my annual eye exam. Surely, it’s the projector’s fault, right? Yes and no.

In my experience, projectors don’t lie. They just exaggerate a little. Their screen resolutions, color matching, and general quality vary wildly, but so do those of the devices with which people view your website. Projectors’ tiny exaggerations can help you identify potential issues with your designs before users encounter them. When projecting a user interface onto a big screen, you probably run into the same two problems over and over again. Don’t dismiss them! For each of these problems, there’s a solution that can improve the legibility and usability of your UI.

Problem 1: All the colors are washed out and it’s difficult to see some stuff!

What you might say: Don’t worry, it’s pretty clear on my laptop.

What’s actually going on: You’re right, the contrast is higher on your Mac! But if you’re having trouble differentiating elements on the projector screen, chances are many of your users with vision impairments or lower quality monitors will also struggle with this. They don’t have all the context you do, so they won’t know how to fill in the gaps when they can’t see everything on the screen.

What to do next: Ask yourself, are the main calls to action still prominent on the projector screen? Can you read all the text on the page, even the text that you consider less important? If your answer is “sort of,” amp up your color contrast. Try going for extreme clarity and then slowly dialing it back to a solution that has great contrast and also meets your aesthetic goals. Run your foreground and background colors through WebAIM’s Color Contrast Checker and ensure that they meet WCAG 2.0 AA standards (WCAG = Web Content Accessibility Guidelines). The contrast ratio between text and background should be at least 4.5:1 for normal-sized text and 3:1 for large text. If you want to be extra sure everything reads well, test your design out in grayscale and with color blindness emulators. Photoshop has color blindness filters built into its “View > Proof Setup” menu.