Theme Colors over MDM:
The Contrast Check

Short answer: When you push a custom theme to The Room Display through MDM, the app uses your colors exactly as you send them. Several colors are drawn on top of others. If two of them are the same, or too close, that part of the screen disappears. The most common case is themeColorDurationButtonText. The 15 min, 30 min, 1 hour and Custom buttons have no fill, so their text sits straight on your background color. White text on a white background, and the buttons are gone. The fix is one line in your MDM configuration. The prevention is a two-minute contrast check.

This came up in a support conversation this month, and it's an easy one to walk into. So here's the full picture.

The symptom: "I only see Book Now"

On a deployed iPad, it looks like this:

• The big Book Now (15 min) button shows up fine.
• The row of quick-duration buttons under it is missing. There's just an empty gap between Book Now and the upcoming meetings.
• On a test iPad, set up by hand without MDM, the same buttons were there.

Nothing is broken, and no feature is switched off. The buttons are on the screen. They're simply the same color as what's behind them.

Why it happens: outline buttons

The two kinds of booking buttons are built differently:

• Book Now is a filled button. Its fill is themeColorAccent, and its label uses themeColorBackground. Pick almost any accent and it stays readable.
• The quick-duration buttons are outline buttons. They have no fill. Their text and thin border both use themeColorDurationButtonText, drawn directly on themeColorBackground.

It's natural to assume the small buttons are filled like the big one, and set their text to white to match. On a dark background that works. On a white or light background it hides them completely.

Which color sits on which

Here's every pairing that needs contrast. The left column is drawn on top of the right column.

The status colors (themeColorAvailable, themeColorInUse, themeColorEndingSoon) paint the thick ring around the screen edge. They don't carry text, so contrast matters less there. They mostly need to look different from each other.

The two-minute contrast check

You don't need a design tool. The app has one built in.

1. Build the palette on one iPad first. Open Settings → Appearance and tap Custom. The theme editor shows a live preview of the display, including the quick-duration buttons, with an Available / In Use toggle.
2. Look at the preview, not the swatches. If you can't read a button in the preview, you won't read it on the wall either.
3. Copy the hex codes. The editor shows the hex code for each of the twelve colors. Those are the values you put in your MDM configuration.
4. Check the pairs in the table above. For small text, aim for a contrast ratio of at least 4.5:1, the WCAG level for normal text. Any free online contrast checker will tell you in seconds.
5. Push to one iPad, then the fleet. Look at the real screen, from a few meters away, before you roll out to every door.

A room display is not passive digital signage. People walk up to it and press buttons. So contrast here isn't just about looks. It decides whether someone can book the room at all.

Fixing a fleet that's already deployed

If your iPads already show the empty gap, change one key in your MDM app configuration. Use a dark color on a light background, or a light one on a dark background:

<key>themeColorDurationButtonText</key>
<string>#222222</string>

Your MDM pushes the new configuration, and the buttons come back. No reinstall, and nobody needs to touch the iPads. If a display doesn't pick it up right away, restarting the app does.

While you're in there, check the other pairs from the table. If one color was off, it's worth a second look at the rest.

What if you leave a color out?

Every themeColor… key is optional. If you send only some of them, the app fills the rest from one of its built-in themes. That's handy for a quick start, but the fill-in colors weren't chosen with your palette in mind. For a branded rollout, send all twelve, so every color on the screen is one you picked.

Checklist before you push a custom theme

• Every text color is clearly readable on themeColorBackground.
• themeColorDurationButtonText is dark on a light background, or light on a dark one. Never the same as the background.
• The Book Now label (your background color) is readable on your accent color.
• Text in the meetings card is readable on themeColorCardBackground.
• You've seen the palette in the theme editor's preview, in both Available and In Use.
• You've tested on one iPad on the actual wall before pushing to all of them.

Frequently asked questions

Why do I only see "Book Now" and not the 15 min / 30 min / 1 hour buttons?

Almost always because themeColorDurationButtonText matches your background, often white on white. The buttons have no fill, so they vanish. Change that one color to something that contrasts with themeColorBackground.

Can I make the quick-duration buttons filled, like Book Now?

No. They're outline buttons by design, so the big Book Now button stays the obvious main action. Pick a text color that stands out from your background instead.

Does the app check my colors for contrast?

No. The app uses your colors exactly as you send them, so the check is up to you. The theme editor's live preview is the fastest way to catch a problem before it reaches the wall.

Do I need MDM to use custom colors?

No. You can set a custom theme on each iPad in the theme editor. MDM is for fleets, when you want every door to match without touching each device. See Apple Business Manager + MDM for room display iPads for the setup.

Which MDM keys control the theme?

theme, logoURL and the twelve themeColor… keys. The full list, with what each color paints, is in the MDM managed configuration docs.

Related guides

• Customizing Your Room Display: Themes, Colors, and Branding
• Apple Business Manager + MDM for Room Display iPads
• Accessible Room Displays: ADA, Contrast, and Mounting Height