Design

Color

Updated: Mar 18, 2026

Color is a fundamental element of immersive experiences, helping users understand information, navigate interfaces, and perceive depth and spatial relationships. Thoughtful and purposeful use of color is critical for creating interfaces that are not only aesthetically pleasing but also intuitive and comfortable in both virtual reality and passthrough environments.

In immersive environments, where an interface can surround the user, the impact of color choices is significantly amplified. Excessive or arbitrary use of color can create visual noise, overwhelming the user and causing discomfort. Every color choice should serve a clear function for the user. A well-considered color strategy serves a function for the user:

Guide attention

Convey useful information

Support usability

Express brand identity

Best practices

Apply color consistently across your experience

Apply colors consistently throughout your interface to build user understanding. If a specific color indicates an interactive element in one context, maintain that association throughout the entire experience. Consistent color associations—such as green for success, red for errors, and yellow for warnings—help build user understanding and confidence.

Meet contrast ratios for readability

The contrast ratio between foreground and background elements is crucial for readability. These ratios follow WCAG AA accessibility standards and are especially important in immersive environments where viewing distances and lighting conditions can vary. The contrast ratio between foreground and background should be 4.5:1 for regular-sized text and 3:1 for large text (18pt+ normal or 14pt+ bold) and non-text elements like button backgrounds.

Minimum contrast ratios for text and non-text elements

These ratios follow WCAG AA accessibility standards and ensure comfortable readability in immersive environments. Below are some technical details to keep in mind.

Testing Contrast	Use contrast checking tools during design and development to verify your color combinations meet accessibility requirements. Test contrast ratios across both light and dark modes, as the same color pair may have different contrast characteristics depending on the background context.
Contrast in Immersive Contexts	In immersive environments, contrast requirements may be more stringent than in traditional interfaces due to viewing distance variations, optical characteristics of the headset, and ambient lighting conditions. When in doubt, err on the side of higher contrast to ensure readability.

Pair color with icons or labels for accessibility

To ensure your application is accessible to users with color vision deficiencies, do not rely on color alone to communicate important information. Whenever color is used to convey status or meaning, also provide a secondary cue, such as an icon, text label, or pattern.

Support both light and dark modes

Meta Horizon OS provides both light and dark appearance modes. To ensure visual consistency with the system, you should support both modes in your application. Developers can detect the user’s preferred color scheme using the prefers-color-scheme CSS media feature⁠ for web-based UIs.

The same interface in light and dark appearance modes

Designing for Mode Transitions	When designing for both modes, avoid simply inverting colors. Instead, carefully consider how each color serves its purpose in different contexts. Dark mode typically uses slightly less saturated colors to reduce eye strain, while light mode can accommodate more vibrant hues.
Maintaining Brand Identity Across Modes	Your brand colors should remain recognizable in both light and dark modes, though their exact values may need adjustment to maintain appropriate contrast and visual weight.

Replace pure white and black with soft grays

High-contrast pure white (#FFFFFF) and pure black (#000000) do not work well in immersive reality, as they can cause eye strain and visual discomfort. Instead, use shades of light and dark gray to replace them. These alternatives provide sufficient contrast while reducing the harsh visual impact of pure extremes.

For light backgrounds, use colors no brighter than #DADADA.

For dark backgrounds, use colors no darker than #1A1A1A.

This principle should be applied to text, backgrounds, and all UI elements throughout your experience to improve viewing comfort.

Colors on Quest

Colors are rendered differently on Quest headsets compared to traditional monitors due to the display technology, lens properties, and unique viewing conditions.

Test your colors on actual Quest hardware

It is critical to test your color choices on actual Quest hardware. This is the only way to ensure they appear as intended. If necessary, iterate on your colors based on how they look inside the headset.

Set the correct color space in your workflow

Current Meta Quest headsets support the sRGB color space, with Meta Quest Pro offering an expanded Display P3 gamut. Display P3 provides approximately 50% more colors with richer saturation compared to sRGB. In general, colors you see in your headset may appear slightly more saturated than on your mobile or desktop screen.

Use a color-managed workflow when developing assets. Work with properly calibrated monitors and explicitly set the correct color space for your content (for example, using OpenXR extensions). Avoid reinterpreting sRGB content as Display P3, as this can lead to over-saturation, color clipping, and loss of detail.

Design for varying physical surroundings

In mixed reality experiences, the colors in your application will interact with the colors in the user’s physical surroundings. For example, light-colored walls or bright ambient lighting can wash out subtle colors, while dark environments can make bright colors appear overly intense. Design with flexibility to accommodate these various physical contexts.

Using UI Set Colors and Implementation

For a consistent and predictable starting point, we recommend using the official Meta Horizon OS UI Set and its associated color system.

Use semantic color tokens instead of hard-coded values

Instead of hard-coding hex values, use a system of semantic color tokens (for example, primary_action, surface_background, text_primary). This practice, common in modern design systems, makes your design more maintainable and allows developers to implement color consistently across different platforms (Unity, Unreal, Web, and more) by mapping tokens to platform-specific color assets.

Implementation

Below are our recommended ways to implement color in an immersive experience.

Resources

Design	Open in Figma⁠. Change themes for specific components or entire pages and customize elements to fit your design system.
Unity	Color space: Set specific color spaces (Rec 2020, Rec 709, Display P3, Adobe RGB) for your Unity project. Download the Meta Interaction SDK (Unity) to use the Meta Horizon OS UI Set. Elements are customizable and support multiple input modalities.
Unreal	Color functions: Use color management functions and blueprints for passthrough and color customization in Unreal.
Meta Spatial SDK	View the UI Set Sample⁠ on GitHub. Includes panel theming with dark and light mode adaptation.
Native	Color space (PC) and Color space (Mobile): Configure color space settings for native development.