Day 147

Make icons work with Bold Text

12 Oct 2022

Your iconography should support Bold Text too. One way of doing it is by creating custom symbols (and specifying weights for it) to work with them as you would with regular SF Symbols.

How Creating custom symbols: https://developer.apple.com/videos/play/wwdc2021/10250/

A coffee cup within a circle icon in three different weights. Creating custom symbols with weights would make it so your iconography supports the Bold Text feature. You can create a custom symbol image using an asset in an asset catalog in Xcode and load it using the UIImage initialiser and passing the name as an attribute.

Some of you have asked me how you can support what I do. This would really help, and would be hugely appreciated:

  • Find these posts useful? Share them at work, on social media, or with anyone that might find them interesting. Let's spread the word!

  • Check out any of my apps or games: Xarra!, RetroRapid!, or Mestre!.

    • A download and a review go a long way. They're free by default. On the App Store, ratings and reviews really help more people discover them.

    • Finding any of them useful? If so, and if you can afford it, purchasing lifetime access to all features or subscribing lets me buy the coffee that keeps me caffeinated. Caffeine keeps me going to maintain the apps, bring in new features that I hope you'll love, and keep writing.

You may also find interesting...

If the user has Bold Text enabled, it will just work if you are using fonts based on text styles. If you have your own styles, or you are using a non-system font, you'll need to provide the bolder version of the font when the setting is on.

In iOS' Settings you can specify your preference to use bold text. This can be checked in code in a couple ways: 1. isBoldTextEnabled in UIAccessibility: https://developer.apple.com/documentation/uikit/uiaccessibility/isboldtextenabled 2. legibilityWeight from UITraitCollection: https://developer.apple.com/documentation/uikit/uitraitcollection/legibilityweight

Classic Invert reverses the colors of the display. But there's also Smart Invert. To support it, for avoiding images and media from being inverted, you just have to set accessibilityIgnoresInvertColors to true, for these elements. A quick win!


Content © Daniel Devesa Derksen-Staats on Accessibility up to 11! is licensed under CC BY 4.0. License details