Guide Systems principles

Patterns

Patterns are fascinating designs that have been used across various cultures and industries for centuries. Patterns offer insight into the cultures and histories that inspired them.

Color & contrast

Accessible design enables users with diverse abilities to navigate, understand, and enjoy a UI.

Copy link Color & contrast

Color and contrast can be used to help users see and interpret your app’s content, interact with the right elements, and understand actions. Color can help communicate mood, tone, and critical information. Primary, secondary, and accent colors can be selected to support usability. Sufficient color contrast between elements can help users with low vision see and use your app.

Contrast ratios

Some non-text elements, such as button containers, should meet a contrast ratio of 3:1 between their container color and the color of their background. Consider the following patterns for combining elements and tones, which are grounded in Material’s research into contrast and functional changes when elements are combined.

The W3C recommends the following contrast ratios for body text and image text. Disabled and inoperable states do not need to meet contrast requirements.

Text type	Color contrast ratio
Large text (at 14 pt bold/18 pt regular and up) and graphics	3:1 against the background
Small text	4.5:1 against the background

Clustering elements

By using standard platform controls and semantic HTML (on the web), apps automatically contain the markup and code needed to work well with a platform’s assistive technology. Meeting each platform’s accessibility standards and supporting its assistive technology (including shortcuts and structure) gives users an efficient experience.

Contrast describes the amount of perceived difference between two colors. Color plays a part in an interface’s visual accessibility by ensuring contrast between elements so that two things of similar color are differentiated.

Sufficient contrast between two colors, such as button text and a button container, is an essential piece of visual accessibility because optimizes usability for a broad range of human vision and experience.

The ‘Accept’ button achieves sufficient contrast for visual accessibility, while the ‘Ignore’ button does not

Elements that are clustered with others, such as a group of buttons, require the user to distinguish each one from the group.

These elements benefit from 3:1 contrast between themselves and the background.

Elements that stand on their own and apart from other elements on the screen, such as a FAB, are already distinguishable to users because of their prominence. These elements don’t benefit from 3:1 contrast between themselves and the background.

When placing components together in a cluster, use components or types of components that each achieve at least 3:1 contrast between themselves and the background.

For accessibility measures, the degree of contrast is measured and represented as a ratio. Contrast ratios measure the difference in lightness or darkness between two colors. A high ratio indicates greater difference between colors and therefore indicates higher contrast.

Contrast in Material

Material’s color system provides standard tone values and measurements that can be used to meet accessible contrast ratios.

Material’s tonal system corresponds to Web color contrast standards as follows:

Colors that are at least 40 steps apart in tonal value achieve a contrast ratio of at least 3:1
Colors that are at least 50 steps apart in tonal value achieve a contrast ratio of at least 4.5:1
Colors that are at least 70 steps apart in tonal value achieve a contrast ratio of at least 7:1

Contrast ratios vary

Specific elements and their intended application will determine which level of contrast is necessary for a given element

Accessible defaults

By default, Material components, such as buttons, are designed to meet contrast requirements for visual accessibility. The contrast ratio remains fixed when a dynamic color scheme changes or switches from a light to dark theme.

By default, Material color roles that are paired and often applied together are also designed to meet contrast requirements for visual accessibility.

Large text

Large text (18pts or larger, or 14pts or larger if bold) should meet a contrast ratio of 3:1 for standard accessibility (graded as AA) and 4.5:1 for greater accessibility (graded as AAA).

Standard text sizes

Standard body text sizes (smaller than 18pts, or smaller than 14pts if bold) should meet a contrast ratio of 4.5:1 for standard accessibility (graded as AA) and 7:1 for greater accessibility (graded as AAA).

Adding custom colors to a scheme

Colors in a scheme are primarily the result of your key colors and their complementary generated tones. Custom colors undergo the same treatment as the core scheme, enabling you to input a custom key color that automatically gets assigned a set of complementary tones.

By default, Material provides the error color as an example of a custom color.

Translated colors into a group

Examples of custom colors that can be added and translated into a group of four compatible tones that would be used for role mapping in a custom light scheme.

In total, core scheme colors and custom colors comprise your entire scheme. You can choose which colors from the resulting scheme that you want to apply.

Left: Core scheme colors from M3 baseline light scheme Right: Examples of custom color inputs that comprise the custom colors in a scheme.

Harmonization

In Harmonization makes adding and introducing new colors to your app more seamless by automatically shifting hue and chroma slightly so that a product’s colors feel more cohesive with user colors

Apply custom colors using the same color roles and relationships that you would use when applying a core scheme.

Product-specific custom colors

Custom colors pin specific hues that often are needed alongside expressive colors in UI as a way to communicate conventional meaning, such as errors. They’re also used to give teams more control and customization alongside the variability of a dynamic color environment.

Harmonized colors shift their hues to feel more at home in an individual user’s overall scheme. This ensures visual balance and maintains accessible contrast when a custom color appears in combination with any user-generated colors.

Tones are assigned to color roles

While key colors are the basis for tonal palettes, only a selection of the thirteen colors from each tonal palette are used in a UI. A scheme is the group of tones assigned to specific roles that get mapped to components.

A primary color’s tonal palette, for example, defines tones for paired roles such as the colors for text and icons that are placed on top of a component (On primary). The tone pairings in color roles provide accessible contrast by default and inform tone adjustments for any additional custom color to work harmoniously with an existing scheme.

Roles in a scheme

Each key accent color (primary, secondary, and tertiary) is provided as a group of 4 compatible colors with different tones that can be applied for differing emphasis and visual expression, and paired for visual contrast. 

Accent colors: Primary, secondary, and tertiary roles are formed following the same pattern of a 4-color group. Primary is used here as an example: Primary base color On-primary is applied to content (icons, text, etc.) that sits on top of primary Primary container is applied to elements needing less emphasis than primary On-primary container is applied to content (icons, text, etc.) that sits on top of primary container Neutral key colors are to provide similar groups of colors for Surfaces and Outlines.

By mapping and coding roles through tokens, rather than assigning hex values, a color can update systematically if a color palette changes. Tokens enable changes to a role’s color value to cascade consistently. From five key colors, roles are automatically assigned roles that map to light theme components

When a color scheme is generated, the tonal palettes include mappings for a dark theme as well. Apps receive light and dark tones through a single generated scheme.

From five key colors, roles are automatically assigned roles that map to dark theme components

Primary

Primary roles are used for key components across the UI, such as the FAB, prominent buttons, active states, as well as the tint of elevated surfaces.

Primary color roles include primary and primary container, with their respective “On” colors

Secondary

Secondary roles are used for less prominent components in the UI, such as filter chips, while expanding the opportunity for color expression. Secondary color roles include secondary and secondary container, with their respective “On” colors.

Tertiary

Tertiary roles are used for contrasting accents that can be used to balance primary and secondary colors or bring heightened attention to an element, such as an input field. The tertiary color role is left for makers to use at their discretion and is intended to support broader color expression in products.

Surface colors

Surface colors define contained areas, distinguishing them from a background and other on-screen elements. There are three core surface roles: surface dim, surface, and surface bright. In addition to five surface container roles: surface container lowest, surface container low, surface container, surface container high, and surface container highest.

Diagram showing the new light theme surface color roles

Diagram showing the new dark theme surface color roles

In this example, the area of primary focus is using the surface role, while the navigation area is using the surface container role.

Surface container is the recommended default color for a contained area against the surface color. It provides good contrast and can be flexibly combined with all other higher or lower emphasis surface roles.

Surface container colors

The surface container roles include five colors ranging from the lowest emphasis to the highest emphasis against the surface role. This allows flexibility in choosing a surface container color that provides more or less contrast against the surface, or to use multiple surface container colors together to create nested containment areas.

Secondary

The range of surface container color roles allows designers to add features for large screen versions of an interface without disrupting the hierarchy of handheld devices. In the example below, a handheld device uses surface as the color for the body region. When the same application scales to a larger device, surface remains the color choice for the body region, while additional surface container roles are used to separate areas of higher or lower emphasis.

Surface
Surface Container Lowest
Surface Container Low
Surface Container
Surface Container High

Neutral-colored components

Neutral-colored components such as navigation bars, menus, or dialogs are mapped to specific surface container roles by default, but can be remapped by makers to suit user needs.

Default surface container roles applied to components:

Surface Container Low
Surface Container
Surface Container High
Surface Container
Highest

Alternative surface colors

Two additional surface color roles are variants to the default surface role. Surface Bright will always be the brightest surface color in either dark or light themes. Surface Dim will always be the dimmest surface color in light or dark themes.

Surface dim navigation rail
Surface bright chat window

Outlines

Don’t use the outline color for dividers since they have different contrast requirements. Instead, use the outline variant color.

Don’t use the outline color for components that contain multiple elements, such as cards. Instead, use the outline variant color.

Don’t use the outline variant color for clustered elements like chips, or other UI elements that are in close proximity to each other. Instead, use outline or another color providing 3:1 contrast with the surface color.

Don’t use the outline variant color to create visual hierarchy or define the visual boundary of targets. Instead, use the outline color or another color providing 3:1 contrast with the surface color.

Additional roles

The color scheme contains some roles that are used in few or no components by default, but are provided as options for products to apply for greater flexibility. Because these colors are used selectively and at product discretion, they are considered additional roles outside of the common colors detailed above.

Inverse colors

Inverse roles are applied selectively to components to achieve colors that are the reverse of those in the surrounding UI, creating a contrasting effect.

Fixed accent colors

Primary Fixed, Secondary Fixed, and Tertiary Fixed are fill colors that retain the same color in light and dark themes. This is opposed to Container accent colors, which change in tone between these themes. The Fixed color role may be used instead of the equivalent Container role in situations where such fixed behavior is desired.

Fixed and Fixed Dim color roles for the Primary, Secondary, and Tertiary accent groups, shown in both light and dark themes. Note how the colors stay the same between themes.

Foundations

Foundations inform the basis of any great user interface, from accessibility standards to essential patterns for layout and interaction.

Accessibility

Accessible design enables users with diverse abilities to navigate, understand, and enjoy a UI.

Assistive technology

Assistive technology helps increase, maintain, or improve the functional capabilities of individuals with disabilities. People can live more independently by engaging with technology through devices like keyboards, screen readers, and braille displays, as well as tracking input, magnifiers, and voice input.

Visual hierarchy

To enable the screen reader to read out content in the intended order, it’s important for designers to collaborate with developers – both for writing out the HTML in the correct order, and understanding how screen readers will interpret designs.

While CSS determines the layout and appearance of a page, screen readers rely on the top-down structure of HTML on any platform (mobile or web). This structure creates a map for the screen reader to follow when reading the content.

Layout and typography

Guidelines can help users who aren’t able to see the screen, or who have difficulty with small touch targets, to tap elements in your app.

Layout and typography

Touch targets are the parts of the screen that respond to user input, extending beyond the visual bounds of an element. For example, an icon may appear to be 24 x 24dp, but the padding surrounding it comprises the full 48 x 48dp touch target. For most platforms, consider making touch targets at least 48 x 48dp. A touch target this size results in a physical size of about 9mm, regardless of screen size. The recommended target size for touchscreen elements is 7-10mm. It may be appropriate to use larger touch targets to accommodate a larger spectrum of users.

Note: iOS recommends 44 x 44dp targets.
Icons: 24dp

Star icon: 40dp

Touch target on both: 48dp

Pointer targets

Pointer targets are similar to touch targets, but are implemented by motion-tracking pointer devices such as a mouse or a stylus. Consider making pointer targets minimums 44 x 44dp.

Recommended target size for pointers: 44dp

Target spacing

In most cases, targets separated by 8dp of space or more promote balanced information density and usability.

Recommendations: Three icons in a row with 48dp touch target size and three icons in a row with 8dp padding between icons

Keyboard

Hardware or software directional controllers such as keyboards, a D-pad, or trackball allow users to jump from selection to selection in a linear fashion.

Screen readers

A screen reader is a software program that uses either a braille display or reads text aloud, such as Google’s screen reader, TalkBack. People with vision impairments, experiencing difficulty reading, or who temporarily can’t read might use a screen reader. Screen readers verbalize visible content and read it aloud. Paragraph and button text, as well as hidden content like alternative text for icons and headings, are identified by the program. Content can be labeled to optimize the experience for those who use screen readers or experience a text-only version of your UI.

Switch input

Switches scan the items on your screen, highlighting each item in turn, until you make a selection. Switch Access lets you interact with your Android device using one or more switches instead of the touchscreen.

Focus order

Input focus that follows the order of the visual layout usually flows from the top to the bottom of the screen. It can traverse from the most important to the least important item. To help determine your focus points and movements, consider:

The order in which elements receive focus
The way in which elements are grouped
Where focus moves when the element in focus disappears
Focus points can be expressed through a combination of visual indicators and accessibility text

Grouping
Group items under headings that communicate what the groupings are and that content is organized spatially.

Transitions
Continuous focus traversal between screens and tasks improves the user experience, allowing for a return to a previously focused element if a task is interrupted and then resumed.

Hierarchy

When navigation is easy, users understand where they are in your app and what’s important. To emphasize which information is important, multiple visual and textual cues like color, shape, text, and motion add clarity.

Types of feedback

Visual feedback (such as labels, colors, and icons) and touch feedback show users what is available in the UI.

Navigation

Navigation can have clear task flows with minimal steps, easy-to-locate controls and clear labeling. Focus control, or the ability to control keyboard and reading focus, can be implemented for frequently used tasks.

Every added button, image, and line of text increases the complexity of a UI.

You can simplify how your UI is understood by using:

· Clearly visible elements
· Sufficient contrast and size
· A clear hierarchy of importance
· Key information that is discernable at a glance

To convey an item’s relative level of importance:

· Place important actions at the top or bottom of the screen (reachable with shortcuts)
· Place related items of a similar hierarchy next to each other

Accessibility text

Accessibility text refers to text that is used by screen reader accessibility software, such as Google’s TalkBack on Android, Apple’s VoiceOver on iOS, and Freedom Scientific’s JAWS on desktop. Screen readers read aloud the on-screen text and elements (such as buttons), including both visible and nonvisible alternative text.

Alternative text (Alt text)

Alt text helps translate a visual UI into a text-based UI. Alt text is a short label (up to 125 characters) in the code that describes an image for users who are unable to see them. Since alt text is only for images, there is no need to add “image of” or “picture of” to the alt text. A screen reader will read the alt text aloud in place of the image. Alt text is valuable for sighted users, as well, because alt text appears if an image fails to load. Include targeted keywords to help inform the user about the image. Keywords can also improve search engine optimization (SEO).

Use alt text to convey what the image is showing in an informative, short phrase.
Alt text example: A DJ standing in front of music equipment at night.

Captions, adjacent text, and embedded text

The text in and around images should consider accessibility because it presents key information about the images.

Image
Caption
Adjacent text

Captions are the text that appear below an asset. They explain an asset’s contextual information–the who, what, when, and where. Both sighted and screen reader users rely on captions for descriptions of assets.

For long descriptions, use captions instead of alt text since they are available to all users and alt text is limited to 125 characters

Embedded text in images Screen readers are unable to read text that is embedded in imagery. If there is essential information embedded as text in the image, include the essential information in the alt text.

Take caution when embedding essential information as text in an image and repeating it as alt text

Essential and non-essential elements

Informative images have essential and non-essential elements. Essential information should have a 3:1 color contrast ratio for large text and 4.5:1 for small text.

The illustration contains both essential and non-essential information:

Essential: The text meets all contrast ratios and size requirements
Essential: An illustrative visual representation of the instructions that follows color contrast guidelines
Non-essential: The decorative elements create background and personality for the illustration. They do not relay information and do not have to meet contrast requirements.

Implementing accessibility

Material A-Z

Get to know the key terms and concepts behind Material, from A to Z.

Adaptive design

Adaptive layouts react to input from users, devices, and screen elements. Material guidance describes how to design for variable screen sizes, from phones and tablets, to desktop and beyond.

Interaction states

States are visual indicators used to communicate the status of a component or interactive element.

Customizing Material

M3 makes brand expression in an interface simpler and more beautiful than ever before.

Design tokens

Tokens store style values like colors and fonts so the same values can be used across designs, code, tools, and platforms.

Styles

Styles are the visual aspects of a UI that give it a distinct look and feel. They can be customized by changing your Material theme.

Motion

Use motion to make a UI expressive and easy to use. Material transitions help guide users as they navigate an app.

Icons

Icons can be used to represent common actions. Material Symbols are a set of variable icon fonts created at seven weights across three different styles.

Elevation

Elevation is the relative distance between two surfaces along the z-axis. All surfaces and components have elevation values.

Typography

Use typography to make writing legible and beautiful. Material’s default type scale includes contrasting and flexible styles to support a wide range of use cases.

Color

Color is used to express style and communicate meaning. With dynamic color, Material puts personal color preferences and individual needs at the forefront of systematic color application.

Shape

The shape scale defines the style of container corners, offering a range of roundedness from square to fully circular.

Components

Components are interactive building blocks for creating a user interface. They can be organized into categories based on their purpose: Action, containment, communication, navigation, selection, and text input.

Actions

Action components help people achieve an aim.

Common button prompt most actions in a UI

Floating action buttons (FABs) help people take primary actions

Extended floating action buttons (extended FABs) help people take primary actions

Icon buttons help people take minor actions with one tap

Segmented buttons help people select options, switch views, or sort elements

Containment

Containment components hold information and actions – including other components like buttons, menus, or chips.

Bottom sheets show secondary content anchored to the bottom of the screen

Cards display content and actions about a single subject

Carousels show a collection of items that can be scrolled on and off the screen

Dialogs provide important prompts in a user flow

Dividers are thin lines that group content in lists or other containers

Lists are continuous, vertical indexes of text and images

Side sheets show secondary content anchored to the side of the screen

Tooltips display brief labels or messages

Navigation

Navigation components help people move through the UI.

Bottom app bars display navigation and key actions at the bottom of mobile and tablet screens

Navigation bars let people switch between UI views on smaller devices

Navigation drawers let people switch between UI views on larger devices

Navigation rails let people switch between UI views on mid-sized devices

Search lets people enter a keyword or phrase to get relevant information

Tabs organize content across different screens and views

Top app bar

Selection

Selection components let people specify choices.

Checkboxes let users select one or more items from a list, or turn an item on or off

Chips help people enter information, make selections, filter content, or trigger actions

Date pickers let people select a date, or a range of dates

Menus display a list of choices on a temporary surface

Radio buttons let people select one option from a set of options

Sliders let users make selections from a range of values

Switches toggle the state of an item on or off

Time pickers help users select and set a specific time

Text inputs

Text input components let people enter and edit text.

Text fields let users enter text into a UI