Color contrast
Color contrast is the difference in luminance between content and its background, written as a ratio. WCAG asks for 4.5 to 1 for normal text and 3 to 1 for large text and for the parts of controls.
Why it matters
Low contrast is the commonest reason text is hard to read outdoors or with low vision, and it changes with every background, mode and setting.
Apple asks that all colors work in light, dark and increased contrast contexts, so one check is not enough.
Color contrast on iOS and Android
Also called Contrast ratio, WCAG contrast, Increased contrast. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | System colors with increased contrast variants | Color roles that pair content with its container | Semantic color tokens in Light and Dark |
| Text ratio (WCAG 2.2) | 4.5 to 1 normal text, 3 to 1 large text | 4.5 to 1 normal text, 3 to 1 large text | See below |
| Contexts to check | Light, dark, increased contrast | Light and dark, with dynamic color roles | See below |
In Appetite UI
Colors are semantic tokens with a Light and a Dark mode, so a text token and its surface change together. The brand step is lightened in dark mode so contrast holds.
Example
A caption in a gray token is checked on the card, the page and the dark card, and the weakest pair decides whether the token moves a step.
Common mistakes
- Checking only the light screens.
- Judging contrast by eye on one bright monitor.
- Light gray text on white because it looks calm.
- Using the brand color for text without testing it on its ground.
Questions
What contrast ratio do I need?
WCAG 2.2 asks for at least 4.5 to 1 for normal text, 3 to 1 for large text, and 3 to 1 for the visual parts of controls.
Does iOS have an increased contrast mode?
Yes. With Increase Contrast on, system colors become more distinct, and Apple asks custom colors to supply a variant for that context.
Sources
The pages the facts above rest on, each read October 30, 2026.