Designing for visionOS & Accessibility

Dynamic Type

Open Vision101 in the Starter folder.

Set Run Destination to Apple Vision Pro,

Now, open CourseView, and refresh its preview in Live mode.

Click Device Settings, then turn on Dynamic Type.

Click the bar or slide the slider to try different values.

For the course description, a larger font size would be easier to read. Add this modifier to Text(course.content) to make it bigger:

.font(.title)

Because this is dynamic type, its size will adapt to the user’s preferred font size setting.

Color Contrast Ratio

Now, open VolumeView, refresh its preview in Live mode,

then zoom in to the Start button.

Open the Accessibility Inspector developer tool: Xcode ▸ Open Developer Tool ▸ Accessibility Inspector.

Then, open its Color Contrast Calculator: Windows ▸ Show Color Contrast Calculator.

In the calculator, click the Text color block to open the color picker, then use the eye dropper to select a pixel in the Start text.

Now, use the eye dropper to set the Background value.

The contrast ratio for Text color FEFFFF and Background color 9A968F is 2.9, which fails for all text sizes. The colors you got might be a little different, but their contrast ratio will also fail.

Here’s one way to improve the contrast. Below the Button closure, add these modifiers:

.tint(.primary)
.foregroundColor(.accentColor)

Zoom in again to the Start button,

and use the eye dropper to change the Background color in the Color Contrast Calculator.

Then, get the new Text color.

Now, the contrast ratio for Text color 0A84FF and Background color F5F4F3 is 3.3, which passes for 18 pt Regular.

Close the Color Contrast Calculator and the Accessibility Inspector tool.

Next, you’ll learn how to add accessibility to RealityKit entities.