How to Optimize Text Readability in Mixed Reality: 3 Steps for XR Developers
For mixed or augmented reality applications where digital elements are blended with the physical world, ensuring text readability across real life lighting conditions is critical for creating effective experiences. At Dauntless XR, we’ve developed our accessibility and UX standards through real-world testing in some of the most demanding environments imaginable.
Pilots, aircraft maintainers, and the broader deskless workforce rely on our apps, and developing them required us to test and refine our solutions on planes in hangars, on the tarmac, and in all weather conditions. These rigorous environments have taught us hard-earned lessons about creating accessible, user-friendly MR/AR apps that we want to pass on to the XR community.
In this guide, we shared three steps to make text legible in augmented and mixed reality with specific suggestions for applications built using Unity empowering you to create immersive applications that work seamlessly anywhere, for anyone.
Step 1: Analyze UI Response to Lighting Conditions
Start by assessing how your current UI performs under varying lighting conditions. The surrounding environment influences text readability so it’s crucial to simulate and test different scenarios. Here's how we approached this:
1. Simulate Lighting Conditions: Use tools like Unity’s Post-Processing Stack to emulate diverse lighting setups in the editor.
2. On-Device Testing: In-editor simulations can only go so far, you’ll need to test on a headset to capture the user experience.Develop a process to test your app in real-world environments, covering at least these three lighting conditions:
- Dark Indoor: Curtains drawn, lights off (preferably at night).
- Lit Indoor: Curtains drawn, indoor lights on (day or night).
- Bright Outdoor: Either in a brightly lit indoor space or outdoors on a sunny day.
In each scenario, orient the device toward different backgrounds during the testing session, as readability is often determined by the contrast between text and its surroundings. Record the readability.
3. Font Sizes and Styles for Testing: During testing, ensure your text is legible for users with varying eyesight. A good starting point for font sizes is 16–20 pt for body text and 24–32 pt for headings, depending on the distance between the user and the display. Use sans-serif fonts like Open Sans or Roboto for better readability in XR environments. Avoid decorative fonts, as they can become distorted in immersive settings.
4. Test with Diverse Users: Text readability varies among individuals due to differences in vision. Fun fact: approximately 1 in 12 men experience some form of color vision deficiency. Testing with a broad group of users ensures your app is accessible to a wider audience.
Step 2: Implement Dynamic Text Adjustments
To maintain text legibility across environments, we found that the app’s UI needs to dynamically adapt to changing conditions. Here’s how to make that happen:
1. Opaque Display Panels: Render text inside opaque panels to help it stand out against varying backgrounds. Use a minimum opacity of 70% for the panel and make sure the text remains visible.
2. Dynamic Adjustments: Use Unity’s tools, such as Text Mesh Pro or the Universal Render Pipeline, to programmatically adjust text properties like brightness, contrast, and color. You can also provide users with manual display theme presets for added customization.
3. Font Styling for Accessibility: Incorporate high-contrast color schemes (e.g., white text on dark backgrounds or vice versa) to improve readability. Enable bold text options for users who may struggle with thin fonts. consider implementing dynamic scaling to allow users to adjust font sizes based on their preferences.
4. Leverage Ambient Light Sensors: Utilize Unity’s LightSensor API (or similar tools) to detect changes in ambient lighting and automatically adjust contrast or materials. For cross-platform solutions, test these features across multiple devices, as sensor sensitivity and display quality vary by manufacturer.
5. Cross-Platform Development: Use libraries like OpenXR, OpenGL, or Vulkan to minimize platform-specific logic. This ensures your solution is scalable and reduces the effort needed to support new platforms in the future.
Step 3: Deploy and Test in Real-World Environments
Once you've implemented your adjustments, it’s time to validate your solution in real-world conditions. This step confirms that your app performs as intended and helps identify areas for optimization.
1. Structured Testing Procedures: Establish a standardized testing process that outlines specific environmental conditions. This reduces friction during testing and makes it easier for teams to reproduce issues and collaborate on fixes.
2. Compartmentalized Optimization: Focus on specific lighting conditions that pose challenges, allowing for targeted improvements without disrupting the overall experience.
3. Font Validation in Testing: During deployment, gather feedback on font sizes, styles, and colors. Ensure that fonts are legible across all tested lighting conditions and devices. If users report difficulty, consider increasing font sizes or adjusting panel opacity.
4. Team Collaboration: A shared testing framework creates a common language for describing environmental conditions, streamlining communication across larger teams.
Bonus Hack: Let Our Free Unity Developer Tool Do the Hard Work for You!
Developing these solutions from scratch can be time-consuming. That’s why we’ve created a free Unity developer tool to simplify the process. Designed to address the challenges of text readability in mixed reality, our tool is a no-code/low-code solution that integrates seamlessly into your existing project to offer your users a manual way to adjust the contrast of their display
Here’s what it offers:
Quick Setup: Add the ModeSwitch component to your game objects, drag-and-drop UI elements, and declare theme settings like font size, color, and opacity.
Cross-Pipeline Compatibility: Works with Unity’s HD, Universal, and Standard Built-In Render Pipelines, so you can use your existing project settings, materials, and shaders.
Centralized Management: Use the ModeSwitchManager to apply changes across your app with a single event—all ModeSwitch components will subscribe automatically.
Iterative Testing: Start testing different display themes immediately, regardless of your coding expertise.
This tool is part of our commitment to helping developers create better, more accessible MR/AR apps. Download it today and start building with accessibility in mind.
Creating accessible mixed reality experiences is a must-have. By analyzing UI performance, implementing dynamic text adjustments, and testing in real-world conditions, you can ensure your app reaches the most users possible.
