Take one photo of your own game menu, then check two things on it: whether the text stands out from the background and whether a thumb can reach the buttons.
This is a different slice from our earlier UI posts: those cover broad UI practices and building a Roblox HUD in Studio, while this page walks you through a single check of one menu, using a photo you take of your own screen and nothing else.
You will not redesign your interface. You will check one screen. When you finish, you will have a marked-up photo and a short list of fixes for that one menu.
What you need
- Your game running on the device players will use, ideally a phone.
- A second device to take the photo, or a friend to hold the phone.
- A printer, or any app that lets you draw on a photo.
- A pen or a drawing tool with two colors.
- The current WCAG contrast guidance, open in a browser tab from the official W3C site.
Step 1: Pick one menu
Choose the screen players see most, or the one you are least sure about. A main menu, a pause menu, or a settings screen all work.
Only check one. If you try to check every screen, you will skim all of them. One screen checked carefully teaches you more.
Step 2: Take the photo in real conditions
Hold or place the phone the way a player would. Then take a photo of the screen from a normal viewing distance with the second device.
A few tips for a useful photo:
- Use the brightness level you would normally play at, not maximum.
- Take one photo indoors and one near a window if your game is played on the go.
- Keep the photo straight on, not at a steep angle.
Also take a screenshot on the device itself. The photo shows what a person sees. The screenshot gives you exact colors to check. You need both.
Step 3: Open the contrast guidance
Before you judge any colors, open the current WCAG contrast guidance on the W3C site. Read the section on text contrast and the section on non-text contrast, which covers things like button outlines and icons.
Do not rely on a number you remember from a blog post. The guidance explains what to measure and what the current requirements are. Write down, in your own notes, the requirement that applies to your text size, copied from the spec as it reads today.
Step 4: Check text against its background
On the screenshot, pick each piece of text that matters. That usually means button labels, the title, and any warning text.
For each one:
- Use a color picker in an image app to grab the text color.
- Grab the background color right behind it.
- Put both colors into a contrast checker that follows the WCAG method described in the guidance.
- Compare the result to the requirement you wrote down.
Mark each text element on your printed photo. Use one color for pass and the other for fail.
Pay special attention to text sitting on top of artwork or a moving scene. The background color may change behind the text. Pick the lightest and darkest spots behind it, and check both.
Step 5: Look at the real photo
Now look at the camera photo, not the screenshot. Ask yourself:
- Can you read every button label at arm’s length?
- Does any text disappear in the window-light photo?
- Is there glare or a dark area that hides an icon?
The checker tells you if colors meet the spec. The photo tells you how the screen feels on a real device in real light. If a label passes the checker but is hard to read in the photo, note it anyway. Size, weight, and spacing matter too.
Step 6: Map where the thumbs rest
Hand the phone to someone, or hold it yourself, in the normal playing grip. Hold it still for a moment.
On the printed photo or a copy of the screenshot, draw where each thumb sits when relaxed. Then, without shifting the grip, move each thumb as far as it comfortably goes and trace that edge.
You now have a rough reach zone for each thumb. Shade it lightly.
Repeat this with a second grip if your game supports both portrait and landscape. Do it with a second pair of hands if you can. Hands differ, and your own reach may not match a player’s.
Step 7: Check each button against the reach zone
Look at every button on the menu. For each one, ask:
- Is it inside a reach zone, or does the player have to shift their grip?
- Is it big enough to hit without aiming carefully?
- Is it far enough from its neighbors that a thumb will not hit two at once?
- Is a destructive button, like quit or delete, sitting right where a thumb rests?
Mark buttons outside the reach zone with a circle. Mark buttons that sit too close together with a line between them.
Do not guess sizes in your head. Try tapping each button with your thumb on the real device, a few times, without looking closely. Note any misses.
Step 8: Check for thumbs covering things
While the thumbs are in place, look at what they cover. A thumb hides part of the screen.
If a label, a price, or a confirm message sits under a resting thumb, the player cannot see it at the moment they need it. Mark those spots as well.
Step 9: Write a short fix list
Look at your marks. Write a short list of fixes, one line each. Keep it to this one menu.
Typical fixes:
- Darken or lighten a text color until it meets the current requirement.
- Add a solid panel behind text that sits on busy artwork.
- Move the most used button into the main reach zone.
- Add space between buttons that a thumb can hit together.
- Move a destructive button away from where thumbs rest, and add a confirm step.
Sort the list so the fails from the contrast check and any missed taps come first.
Step 10: Fix, then retake the photo
Make the changes. Then repeat the photo, the screenshot, and the thumb test in the same conditions as before.
Put the old and new photos side by side. Check each marked spot. If a fix created a new problem, like a button moving under a thumb, note it and adjust.
Keep it small
You now have one menu checked for contrast and reach, with before and after photos. File them together with your notes on which requirement you checked against and the date you read the guidance.
When you check the next menu, use the same steps and the same lighting. Guidance can be updated, so open the current WCAG page again each time rather than reusing old notes. One screen at a time is enough.