| Guidance | Details | Guidance Level |
|---|---|---|
Add a back button to the interface if needed | Unlike Android mobile devices, a system back button is not available across all input modalities. Add a back button to your app’s interface when users need one. | Requirement |
| Guidance | Details | Guidance Level |
|---|---|---|
Ensure adequate hit target sizes | Use hit targets of at least 48dp x 48dp. This size allows space for a user’s finger and hand tracking movement. Use at least 60dp x 60dp for primary controls. ![]() | Requirement |
Use invisible hit slop | Add hit slop when an asset does not meet the minimum target size. The example image shows a small button that needs hit slop. Add hit slop to actionable icons as well. ![]() | Requirement |
Leave enough space between components | Leave room for invisible hit slop around small components. Overlapping hit areas can make the wrong control respond. ![]() | Requirement |
Add hover states to all targets and inputs | Add hover and focus states to interactive elements to support multiple input modalities. | Requirement |
| Guidance | Details | Guidance Level |
|---|---|---|
Provide sufficient color contrast | Use a contrast ratio of at least 4.5:1 for regular text and 3:1 for headlines or non-text elements, such as button backgrounds. ![]() | Requirement |
Test colors in headset | Headset color space can make colors look more saturated than they do on a phone or desktop. Test the app in a headset and adjust its colors when needed. | Recommended |
Avoid using pure white ( #FFFFFF) and black (#000000) | Pure white and black create harsh contrast in mixed reality. Use light and dark gray instead. Keep light backgrounds at #DADADA or darker to reduce eye strain. | Recommended |
| Guidance | Details | Guidance Level |
|---|---|---|
Choose the correct font size | Use at least 14px for readable text. Use 18px or larger for more comfortable reading. Font design can affect the exact size needed. ![]() | Requirement |
Choose a legible font | Choose a sans-serif font with a high x-height and large counters. These traits keep text clear at small sizes and while the view is scaled. Inter provides a native look and strong legibility. ![]() | Recommended |
Choose an appropriate font weight | Use size and weight to create a clear hierarchy. Black, Bold, Medium, and Regular weights are more legible than Light and Thin weights. Increase the text size when using a light weight. ![]() | Recommended |
| Guidance | Details | Guidance Level |
|---|---|---|
Use simple, recognizable icons | Simplify icons for greater clarity and legibility even at small sizes. Avoid using complex icons with delicate, thin stroke weights. Use icons designed for Meta Horizon OS to achieve a native look and feel. ![]() | Recommended |
Provide icons at appropriate sizes | Design icons on a 192x192 pixel source grid for use on a 24x24 pixel display grid. The larger source grid keeps icons sharp on higher-resolution headsets. ![]() | Recommended |