# 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.

Page: https://www.appetiteui.com/glossary/color-contrast. Color contrast for mobile UI: ratios, dark mode and increased contrast. Also called Contrast ratio, WCAG contrast, Increased contrast.

## 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.

## iOS and Android

|  | iOS | Android (Material 3) | 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

1. [Apple Human Interface Guidelines: Color](https://developer.apple.com/design/human-interface-guidelines/color)
2. [W3C: Web Content Accessibility Guidelines 2.2, contrast](https://www.w3.org/TR/WCAG22/#contrast-minimum)

## Related

- Docs: [Colors](https://www.appetiteui.com/docs/colors)
- Article: [Dark mode with Figma variables, not duplicate frames](https://www.appetiteui.com/blog/dark-mode-figma-variables)
- Glossary: [Dark mode](https://www.appetiteui.com/glossary/dark-mode)
- Glossary: [Semantic tokens](https://www.appetiteui.com/glossary/semantic-tokens)
- Glossary: [Accent color](https://www.appetiteui.com/glossary/accent-color)