Published in


Above: IWalk app in use at the Holocaust Memorial Plaza in Philadelphia

Accessibility in React Native

Readability: Text Sizes

On both Android and iOS, you can increase your system font size. With iOS however, it can be enlarged up to a robust 300%.

Icon size=“16 * PixelRatio.getFontScale()”
{PixelRatio.getFontScale() < 1.2 && (<Image source={{ uri: imageUrl }} /> )}

Readability: Text contrast and styling

AAA contrast
Outlined by WCAG 2.0 (Web Content Accessibility Guidelines), most text needs to contrast its background with a ratio of at least 4.5:1 A handy tool we’ve used is Contrast to check our text color. This app is meant to be used outdoors, and even on the cloudiest days, apps with low contrast are difficult to see.

A few thoughts about accessibility

Before the project started, I attended Kat Holmes’ talk at Seattle Town Hall. Her book “Mismatch” is a great read on the subject. One of the most poignant lessons I learnt was this:

By Kat Holmes in “Mismatch”

About our project

Our team of three developers, one designer, and one engagement manager completed this MVP app in ~14 weeks.

How to try out accessibility features on your smartphone

Enlarge text
iOS: Settings > General > Accessibility > Larger Text
Android: Settings > Accessibility > Font Size


Kat Holmes
React Native Documentation: Accessibility 2018 Update
Accessible colors
Contrast app
WCAG 2.0 Contrast (minimum) documentation
Accessibility Scanner app for Android

Thank you

Please let us know if you’ve found better ways to tackle these in the comments.



Substantial is a digital product studio creating best-in-class software that lowers risk and creates faster outcomes through strategy, design, & development for web, mobile, and connected devices. Learn more about us at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store