Dynamic Type & Color Contrast
Dynamic Type
Dynamic Type lets your users set the font size they feel comfortable reading — smaller to fit more content on the page, or larger for less than perfect vision or to compensate for low color contrast. Apple’s Text Size and Weight guidelines recommend that you:
- Use Dynamic Type.
- Test that your app’s design can scale and is legible at all accessibility font sizes.
The first is easy: All SwiftUI text elements support multi-line Dynamic Type by default. And Apple provides several text styles: the default body, larger styles like title and headline, and smaller styles like caption and footnote.
The second is also easy because you can try out different font sizes right in the preview canvas:
Color Contrast Ratio
Color contrast ratio plays an important role in accessibility. Strong contrast between UI elements in your app makes it easier for all your users to see your content.
The amount of contrast between foreground and background colors falls under Guideline 1.4 Distinguishable of the Web Content Accessibility Guidelines (WCAG) 2.1:
Make it easier for users to see … content including separating foreground from background.
The Level AA Minimum guidelines recommend a contrast ratio of at least 4.5:1, although a 3:1 contrast ratio is OK for large-scale text (18 pt or larger) or bold text of any size.
The Level AAA Enhanced guidelines recommend higher contrast values — at least 7:1, or 4.5:1 for large-scale text.
Xcode has an Accessibility Inspector, which has a Color Contrast Calculator:
In this example, the foreground color is 8C3C03, and the background color is C8B998. The color contrast ratio is 3.9:1, which is acceptable for 18 pt text. This screenshot shows 14 pt text, where the color contrast is not quite good enough.
In the next video, you’ll try out these tools in a visionOS app.