Content colors are semantically named for their hierarchical purpose and corresponding environment.
Choose a content color based on content hierarchy. A clear hierarchy makes the interface easier to understand, and ultimately more effective.
Contrast: Fully opaque, it differs the most from its background. Use it for more important or dominant elements.
Color contrast isn’t the only way to create content hierarchy. Thickness, saturation, whitespace and element size should all be used in conjunction with contrast to gracefully guide the user’s attention.
Don'tuse one color for all elements in a region.
Douse a variety of content colors and sizes for easier scanning.
Use Contrast, Default and Subtle confidently—they all pass WCAG 2.0 contrast accessibility standards on all levels.
Nonessential does not and should never be used for important information.
Don'tuse nonessential for key content in an interface.
Douse nonessential to support the information hierarchy.
|LE Text Contrast|
|LE Text Default|
|LE Text Subtle|
|LE Text Nonessential|
|LE Icon Contrast|
|LE Icon Default|
|LE Icon Subtle|
|LE Icon Nonessential|
|DE Text Contrast|
|DE Text Default|
|DE Text Subtle|
|DE Text Nonessential|
|DE Icon Contrast|
|DE Icon Default|
|DE Icon Subtle|
|DE Icon Nonessential|