Make your app visually accessible

Hello, and welcome to WWDC.

Hi, everyone. My name is Drew Haas, and I'm an engineer on the accessibility team. Today, I'm going to talk about how you can make your app visually accessible.

When you think about visual accessibility, you might think about VoiceOver, the built-in screen reader on iOS. And you'd be right, because VoiceOver speaks the items on-screen.

It also allows you to navigate and interact with your device without you needing to look at it. But there's so much more to visual accessibility.

Vision loss is best described as a broad continuum. That's because people experience a wide range of visual impairment. Some people have full sight, partial sight or low sight, and some have no sight at all. And there's a lot in between, like color blindness, light sensitivity, motion sensitivity and more. Since each person's experience with vision loss is unique, iOS offers a range of visual accessibility settings so that everyone can get the most out of their device in a way that works best for them. Today, I'll talk about some of the great ways that your app can provide a visual experience that is inclusive to everyone.

First, I'll talk about the use of color and shapes in your app, which are a great way for you to add a personal touch, like branding.

Next, I want to break down what it means for text to be readable. You can leverage different text attributes and layout changes in your app to make sure everyone has a great reading experience. And last, in accessibility settings, users can customize their display preferences, which may alter the appearance of your app. I'll make sure you know just what to look out for as you make your app visually accessible. When designing an app, sometimes you may ask yourself, "How can I make this particular UI element stand out?" Using color is often a great way to create emphasis, but we don't want to rely on color alone. That's because for people that are color-blind or have low vision, using color only to create emphasis can get lost. There are extra steps you can take to achieve good design, and I'll give you a hint: It's shapes. I'm searching for a new game to play in Apple Arcade.

Sneaky Sasquatch looks like fun. In the App Store, buttons use the color system blue, and some use shapes to help them stand out...

like the "start playing" button, which is using color, and it has a shape around it.

This really helps it stand out, and lets a viewer know it's not just a standard label. The extra visualization captures my attention and draws me in, but I'll have to save this game for later. Let's talk about another example. Although tab bars only use color by default to indicate the active tab, you can enable the Button Shapes accessibility setting to get additional visualizations. If you want your buttons to really stand out while the button shapes setting is enabled, we're bringing new API to iOS 14 to help you accomplish this.

If you can't fit button shapes in your default design, you should provide an alternate appearance for people with this setting enabled.

To check this setting, you can call button-Shapes-Enabled on UIAccessibility, or you can observe the button-Shapes- Enabled-Status-Did-Change-Notification to run some code on the fly when this setting is changed. Last year in iOS 13, we added new API for Differentiate without Color, and this is a great way to extend these ideas beyond just buttons. You should apply this design practice to things like status icons, text with distinguishing colors, or anything else that relies on color alone to convey meaning. If you aren't sure where to start, try using SF Symbols.

We provide over 1,500 consistent, highly configurable symbols you can use in your app. There are so many to choose from, but if you don't find something that fits perfectly, you can create your own by expanding on icons provided by SF Symbols. Fun, right? SF Symbols are really powerful because they look great at any weight and scale. This means not only are you getting great symbolism, but you can configure the symbol to scale with text size and style. Let's dive in to some of my own UI, where I'm just getting started designing the visual experience with color and shapes. I'm working on a constellation tracking app, Starstruck.

Early stages of development are the best time to start thinking about visual accessibility accommodations, but it's really never too late to dig in. I have a list of zodiac constellations, and I'm distinguishing between them by choosing a custom color for each.

If you're color-blind, these might not stand out like I'd intend. Since I'm already working toward making these stand out, I don't want to stop at using just color, so I designed symbols to use in my app, giving each constellation a distinct visual experience by using color and shapes. This way, more people get to have a fun viewing experience when they use my app.

I'm also using bold text optionally to improve readability here, and I'll touch more on that later.

When we do use color in our apps, it's important to keep in mind that color contrast plays a huge role in readability, and it can be the difference between someone being able to see an element or having it completely blend in.

The Increase Contrast accessibility setting makes elements stand out by updating colors to high-contrast appearances. iOS offers a range of system colors that automatically adapt to settings like Increase Contrast.

If you're not using system colors, you'll need to be aware of this setting to improve the visual experience in your app. As a general rule, colors should get darker in Light Mode and lighter in Dark Mode. I know that might sound confusing, so here's an example.

In default contrast, my zodiac symbols are using colors I designed them with, but when Increase Contrast is turned on, I need something a little bit darker here. Now, I want you to keep an eye on the symbols in each cell as I enable Increase Contrast in settings.

Ready? Okay. I know that might have looked subtle, but this is a really big deal. For some people, having this boost in contrast can make a huge difference. If you are using custom colors and symbols like this in your app, you'll need update the tint color or provide alternate assets for high-contrast appearances.

In my project's asset catalog, I can configure the appearance of my symbol by making changes in the Attributes Inspector. Under Appearances, you can check the High Contrast box to provide alternate versions of your symbols.

The High Contrast appearance will be used when Increase Contrast is on.

The Accessibility Inspector in Xcode has a super-handy Color Contrast Calculator.

You can use this tool to calculate the contrast between any two colors. Here, I'm calculating the contrast between my white symbol, which is in the foreground, against my custom purple color in the background.

This gives me a ratio of 4.5-to-1, which is generally the lowest acceptable ratio for most cases.

And here's my symbol's high-contrast appearance. I'm darkening the background color to really make that symbol pop, and my ratio is way better, at 7.5-to-1.