You built a settings panel. On your PC and VR headset it works fine.
But someone playing seated can't reach it. Someone visiting from a phone can't read the text. Someone operating one-handed keeps hitting the adjacent button.
This isn't about adding special features. Changing a few numbers on the panel you already have clearly increases who can use it. This article covers three of them.
What You'll Learn
- Text size targets, and how to check them
- Button size and spacing
- Why volume goes from a slider to steps
- Not hard-coding heights
Start from having tried building world-space UI.
Difficulty happens to everyone
"Accessibility" can sound like support for someone particular. In practice, a lot of people fit these situations daily.
| Situation | What becomes difficult |
|---|---|
| Playing seated | Can't reach buttons placed high |
| One hand occupied | Hits the adjacent button by mistake |
| Visiting from a phone | Can't read small text. Can't do fine drags |
| Tired from standing | Doesn't want to do precise operations |
Notice that last one and the framing shifts. You when you're tired are on this list too.
So what we do here is less "consideration" than design quality. A button that's easy to press is easy for everyone to press.
Three things to fix.
- Make the text bigger
- Make buttons bigger and spaced apart
- Turn volume from a slider into steps
Each takes minutes.
Hands-On: Fix three things on a settings panel
Build a settings panel toggling volume and a mirror, then make the three adjustments.
1. Prepare the panel
Place a World Space Canvas in a scene with a floor and name it SettingCanvas.
| Field | Setting |
|---|---|
| Render Mode | World Space |
| Position | (0, 1.2, 2) |
| Scale | (0.002, 0.002, 0.002) |
| Reference Resolution | 1920 × 1080 |
Add VRC Ui Shape via "Add Component." Without it you can't touch it inside VRChat. The mechanism that opens it front-facing on phones assumes it too.
(0, 1.2, 2) is chosen because seated players can reach it there. Placed at eye level, it's far away for anyone seated.
2. Make the text bigger
Put a title and field labels on the panel with TextMeshPro.
With a Reference Resolution of 1920 × 1080, the targets are these.
| Use | Font size |
|---|---|
| Headings | 40 or more |
| Body and labels | 28 or more |
| Annotations | Not below 24 |
Numbers alone are hard to judge, so learn one way to check.
Press Play and stand 1.5 meters from the panel. Decide by whether you can read it comfortably from there.
Being readable up close is a given. What matters is readability from a distance. People playing seated can't always get closer.
3. Make buttons bigger and spaced apart
Place two buttons for toggling the mirror on and off.
| Field | Setting |
|---|---|
| Button height | 80 or more (at Reference Resolution 1920×1080) |
| Spacing between buttons | 24 or more |
| Text inside buttons | 28 or more |
Spacing matters most. Touching buttons get mis-hit by one-handed laser pointers and by fingers on phones alike.
One more thing. Put hard-to-undo actions away from the rest.
- Place "Reset" and "Clear all" well away from other buttons
- Change their color too if you can, so people notice before pressing
If you're using a Layout Group, raising the Spacing value alone inserts the gaps.
4. Turn volume into steps
This is the biggest win of the three.
Volume control makes you want a slider. But a slider is a press-and-drag operation.
| Device / situation | Slider | Stepped buttons |
|---|---|---|
| VR controllers | A shaky hand slips off | Just press |
| One-handed | Press-and-drag is hard | Just press |
| Phone | The finger hides the position | Just press |
So replace it with four buttons.
[ Mute ] [ Low ] [ Mid ] [ High ]
Four steps is enough in practice. Being able to press reliably is worth more than finer "just a bit quieter" control.
Show the currently selected step with a button color change. Without visible results, nobody knows whether it took.
To carry the chosen step to next time, the mechanism in saving volume with PlayerData works directly. The saved value just changes from a number to a step index.
5. Confirm on three devices
Once fixed, actually look at it.
| Check | Where to look |
|---|---|
| Stand 1.5m away on desktop | Is the text readable |
| Try a seated posture in VR | Can you reach the buttons |
| Enter from a phone | Does it open front-facing, do you mis-hit |
Always include the phone check. Building on PC, it's the device you'll overlook most.
Don't hard-code heights
One more thing, and it extends beyond panels.
VRChat avatars vary wildly in height. Building with your own avatar makes it the reference.
| Easy to hard-code | What happens |
|---|---|
| A sign at your eye level | Invisible to small avatars |
| A button at your waist height | Large avatars have to crouch |
| A beam assuming your head clears it | Tall people catch on it |
The response is simple.
- Place buttons low. Low is more reachable than high
- Make signs large. Big enough to read looking up or down
- Wide corridors, high ceilings. When in doubt, leave margin
While building, swap to a small avatar once and walk around. The view changes and what needs fixing becomes obvious.
Common Pitfalls
- You can't press the buttons inside VRChat → VRC Ui Shape isn't attached
- It doesn't open front-facing on a phone → The panel isn't visible, or is too far. Move it closer
- The text is blurry → The Canvas's Scale is too small. Raise the Reference Resolution, then adjust
- You mis-hit buttons → Not enough spacing. Widen to 24 or more
- You can't reach it seated → Lower the panel. Around
1.2is the target - You can't tell whether a press registered → Show the selected state with color
Bonus: Good to Know Up Front
- Secure the contrast: Light grey text is hard to read in a bright room and a dark one alike. Put clear brightness distance between text and background
- Don't distinguish by color alone: "Green is on, red is off" doesn't reach people who see color differently. Change the text or the shape too
- Don't signal with sound alone: If you signal with a sound effect, add a visual change. Some people have sound off
- Avoid flashing: Fast flashing can affect people physically. Use slower transitions
- Doing one of them still helps: You don't need all three. Making text bigger alone increases who can read it
Summary
A usable panel takes three adjustments.
- Body text at 28 or more. Confirm readability from 1.5 meters
- Buttons at height 80 or more, spacing 24 or more. Keep hard-to-undo actions apart
- Volume as stepped buttons, not a slider
- Don't hard-code heights. Place low and build large
The question to ask before placing something is: "Can this be used seated, one-handed, from a phone?" Pass that and most people can use it.
To confirm the publishing steps, go to uploading a world. To widen your device support, go to supporting Quest and phones.