Text contrast and typography

Make text readable and resizable for everyone.

Overview

What you need to do

Text must be:

large enough to read easily
have sufficient contrast against backgrounds
maintain functionality and readability when scaled to 200% of the default size.

Meeting the Web Accessibility Standard

When text and background colours meet minimum contrast requirements, this meets WCAG 2 Success Criterion 1.4.3 Contrast (Minimum)  (Level AA).

When text can be resized up to 200% without loss of content or functionality, it meets WCAG 2 Success Criterion 1.4.4 Resize Text (Level AA).

Why this matters

Poor text readability affects many users, including those with vision impairments, reading difficulties, or anyone using phones in bright sunlight. Text that does not resize properly excludes users who depend on larger text sizes.

When this applies

Considerations for all text

Sufficient contrast: 4.5:1 ratio for normal text, 3:1 for large text (at least 18pt, or 14pt and bold)
Readable sizes: Minimum 16sp (Android) and 16pt (iOS) for body text
Proper scaling: Text must resize up to 200% without loss of functionality
Adequate spacing: Sufficient line-height for good readability

Special considerations

Text over images: Higher contrast requirements and backup solutions
Interactive text: Links and buttons need clear visual indication without relying on colour alone
Error messages: Must be easily distinguishable from regular text

Note: In native apps, user interface elements such as text and buttons do not resize via pinch-to-zoom gestures.

However, both iOS and Android support special accessibility zoom features through their accessibility settings, typically enabling users to perform a special tap to zoom the screen:

iOS — Zoom in on the iPhone Screen — Apple Support
Android — Use magnification on your screen — Android Accessibility Help .

Users can also set their preference for larger font sizes at the operating system level. Read Dynamic Type and Font Scaling below.

Design

Checklist for accessible typography

Use sufficient colour contrast (4.5:1 minimum for normal text, 3:1 for large text).
Choose readable font sizes (16sp/16pt minimum for body text).
Ensure adequate line spacing (try a line-height of 1.5 times the font size then adjust if necessary) then adjust if necessary).
Test text at larger sizes (up to 200% scaling).
Use real text instead of text in images.
Consider reading flow and avoid problematic line breaks resulting in widows or orphans.
Use fonts that distinguish between similar characters (like ‘l’, ‘I’, and ‘1’).

Design resources

For guidance on colour contrast for text, read the Contrast for text and images of text — Knowledge Area: Colour and contrast.

For more on accessible fonts and typography, refer to:

Development

Dynamic Type and Font Scaling

Dynamic Type (iOS) and Font Scaling (Android) are platform-level features that allow users to set their text size preferences. Where supported, these features automatically resize text to improve readability without breaking the content’s layout.

See the platform-specific guidance below for how to support these features in your app.

iOS implementation

For information on supporting Dynamic Type in your app, refer to the following Apple Developer Documentation resources:

For technical guidance on addressing colour contrast and resizing text in your app, read:

For complete guides on iOS accessibility from Apple Developer Documentation, read:

Android implementation

Use scale-independent pixels (sp) and not density-independent pixels (dp) for text size. The sp unit is the same size as the dp unit, but it resizes based on the user's text size preferences.

For information on supporting Font Scaling in your app, read Non-linear font scaling to 200% — Android Developers.

For technical guidance on addressing colour contrast and resizing text in your app, read:

For a complete guide on Android app accessibility, see Make apps more accessible — Android Developers.

Testing

Quick test

These steps help you verify that text remains readable and functional across different user configurations and accessibility settings.

Increase your device’s text size to maximum in accessibility settings — does all text still fit and remain functional?
Check colour contrast — is text, and images of text, legible with platform high contrast settings turned off?
Test with different system themes (light/dark mode) — does the interface work well in both light and dark mode?
Review text spacing — is text easy to read?
Check interactive text elements — are they distinguishable and easy to identify?

Automated testing

Check for colour contrast issues with the platform accessibility testing tools:

iOS — Accessibillity Inspector — Apple Developer Documentation
Android — Accessibility Scanner — Android Accessibility Help
Android — axe Accessibility Analyzer — Deque Systems — Google Play.

Testing colour contrast

If you have direct access to the colour codes used in the app, that is preferred. Otherwise, load the app in a simulator or take snapshots and email them to yourself, then use a eye-dropper tool to find the colour codes used.

Enter the foreground and background colour codes you have into a contrast checking tool.

Note: Checking colour contrast using screenshots from devices and sampling tools can be inaccurate. You are unlikely to get the exact value used in the app's code. This can result in false failures. It can be more valuable to perform static testing of colours in the design phase, then have developers use user interface snapshots and unit tests to verify the right colour values for elements against the design.

For a list of contrast checking tools and more on testing contrast, read Test for sufficient contrast — Knowledge Area: Colour and contrast.

Learn more

Platform guidance

Read the official design and development typography guidance for each platform:

iOS — Typography — Human Interface Guidelines — Apple Developer Documentation
Android — Typography — Material Design 3.