Important actions: Place important actions at the top or bottom of the screen (reachable with shortcuts).
Related items: Place related items of a similar hierarchy next to each other.
The order in which elements receive focus
The way in which elements are grouped
Where focus moves when the element in focus disappears
Small text should have a contrast ratio of at least 4.5:1 against its background.
Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background.
Icons or other critical elements should also use the above recommended contrast ratios.
These lines of text follow the color contrast ratio recommendations and are legible against their background colors.
These lines of text do not meet the color contrast ratio recommendations and are difficult to read against their background colors.
These icons follow the color contrast ratio recommendations and are legible against their backgrounds.
These icons do not follow the color contrast ratio recommendations and are difficult to discern against their backgrounds.
Clearly visible elements
Key information discernable at a glance
Sufficient contrast and size
A clear hierarchy of importance
Navigate: Give users confidence in knowing where they are in your app and what is important.
Understand important tasks: Reinforce important information through multiple visual and textual cues. Use color, shape, text, and motion to communicate what is happening.
Access your app: Include appropriate content labelling to accommodate users who experience a text-only version of your app.