Search code examples
swiftuiaccessibilitycontrasthigh-contrast

Icon looks different with increased contrast setting on device


I have an icon in my app that looked ok on the simulator but wrong on my device; it was kind of "pale". It took me almost a month to figure out why, and the reason was a setting increasing the contrast of images. You can find it in the settings here: Settings -> Accessability -> Display & Text Size -> Increase Contrast-switch.

I have several icons in my app but only one was affected by this, as far as I could see.

My question: Is there any way to ignore this so that the icon always looks correct?

The icon is black and render as default


Solution

  • You can provide images to be used when high contrast is enabled in the phone. To do that, select your image in Assets.xcassets and check High Contrast checkbox in the Attributes inspector. Then add the images to be used for high contrast.

    Read more about it here.

    You can test this from Xcode using Environment overrides menu.

    enter image description here