Original Photo by Nigel Tadyanehondo on Unsplash

iOS Accessibility Invert Colors

The easiest Accessibility feature you are not supporting yet

Giovani Pereira
3 min readJun 8, 2022

--

There are a ton of Accessibility Features for iOS devices, supporting some of them is easier than supporting others, but ideally, we should try to support all of them.

Different people have different needs, and at some point, someone with a special need may need to use your app. And we should want everyone to be able to use our apps and products.

And here, we are going to talk about one of the easiest to handle accessibility features out there, and that you are probably not supporting: Smart color inversion.

Invert Colors

The Invert Colors is a native iOS device Accessibility Feature, it allows the entire interface to have the colors inverted.

You can find Apple's Accessibility documentation in here.

Invert Colors are mostly used to increase contrast on apps that do not support dark mode 👀, so you can also support dark mode in your apps to add a new layer of accessibility!

We have 2 different color inversion possibilities:

  • Classic invert: Will invert the entire interface;
  • Smart invert: Inverts the display colors, instead of images;
Examples of iOS color inversion features

To support the Classic Invert you don't really need to do anything, what we need to do, is to make it ready for the Smart Invert by telling which views should not be inverted.

When to use it?

We should ideally set up our view to not invert anything that represents some real image. Imagine you have an app that sells food, one important part of the experience is viewing the image of the food you are about to purchase. But, if the user is using the Smart Invert these images would also be inverted.

Example of handling Smart Invert on an UIImageView

Adapting views

Adapting a view to no invert during the Smart color inversion is as easy as a single line of code:

The accessibilityIgnoresInvertColors property is available in every UIView and tells the Accessibility engine if this view should be inverted or not. By default, it's false, which means the view will be inverted.

Check here the Apple documentation.

If you have a view (mostly, UIImageView) that should not be inverted, you just add this line of code to it.

Wrapping up

That's all folks!

There is not much more to it, just the feeling: Add as many accessibility features as possible and help your apps to be used by everyone.

And if you'd like to see a little bit more about accessibility features, check this other article with some nice real-life examples about building the accessibility of a groceries catalog:

--

--