MA6: Touch, gestures and accessibility
Text, colour and dark mode
🎯You'll be able to
Support large text, choose colours with enough contrast, and follow the phone's dark mode setting with theme tokens.
🏠The everyday picture
A shop sign has to be readable in midday sun and at night under a street lamp. The best signs use strong contrast and change their lighting for the evening.
📘What it really is
- Large text: people set larger fonts in the phone's settings; React Native scales
Textby default. Let rows grow and text wrap. -
Contrast: normal text needs at least 4.5:1 against its background (WCAG). Light grey on white often fails, and outdoors in sun it's worse.
-
Dark mode:
useColorScheme()returns'light'or'dark'. Keep two palettes of named colours (tokens) such astext,textMuted,background,primary, and pick one with the setting. -
Tokens, not hard-coded colours: screens use
t.text, never'#333333', so a palette change reaches every screen. - Don't rely on colour alone: pair a red error with words, and an icon with a label.
📝A worked example
Input: KhetNote's starter uses #A0A8A0 for secondary text on white, and one palette for both modes.
Steps:
- Measure: about 2.4:1, well below 4.5:1. Choose a darker grey (
#4A5548, about 7.8:1). - Add
THEMES.lightandTHEMES.darkwith the same token names, checking each text colour on its backgrounds. - Make
useTheme()return the palette foruseColorScheme(), and use it in every component.
Expected output: readable text in both modes, which changes when the phone's setting changes.
🌍Where it's used
- Most apps support dark mode, which many people use at night or to save battery on some screens.
- Design systems define tokens for both modes.
- Outdoor apps choose strong contrast for sunlight.
📝Case scenario
A delivery app's dark mode kept the light palette's dark-grey text on a near-black background. Drivers at night couldn't read the address. A separate dark palette, checked for contrast, fixed it.
🖱️Try it
Calculate (with any contrast checker) the contrast of KhetNote's starter textMuted on white and of your replacement. Success: your
choice is at least 4.5:1.
⚠️Common mistakes
- Hard-coded colours. Sign: dark mode misses some screens. Fix: tokens everywhere.
- Pale grey text. Sign: hard to read outdoors. Fix: 4.5:1 or more.
- Fixed heights for text. Sign: cut text at large sizes. Fix:
minHeightand wrapping.
🛠️For your project
Project 2's tests 7 and 8 check dark mode and contrast for text, muted text, button text and errors in both palettes.
✅Quick check
What contrast does normal text need against its background?
Show the answer
At least 4.5:1.
Why use colour tokens instead of hard-coded colours?
Show the answer
So both palettes, and any change, reach every screen.