Spectrum colors are designed to be clear and accessible. They come in different color themes. Each theme is constituted of grays, semantic colors (e.g., blue, red, orange, green), and label colors.
Spectrum offers 4 color themes: 2 light and 2 dark. Each product can support any number of color themes, allowing users to switch between them. The choice of which color themes to support should be based on content, platform, and user experience.
Color themes and device color modes are different. Color themes are app-specific options, while device color modes (light mode and dark mode) are operating system settings that affect the theming of an entire device.
In light mode, Spectrum has two possible default themes: light theme and dark theme. The option of a dark theme is for supporting experiences that are optimal with a darker interface regardless of the device mode, such as photo and video editing.
In dark mode, Spectrum has a single default theme: darkest theme. The darkest theme aligns more closely with operating system standards for dark mode, such as near-black backgrounds. Spectrum does not support using any of the light themes in dark mode.
All of the colors in Spectrum color themes are generated by target contrast ratio. This maps certain grays and colors with confidence that the color will meet WCAG AA accessibility requirements for minimum contrast. The brightness of overall contrast can also be increased or decreased for any theme.
Every part of the interface in any possible state (hover, disabled, etc.) is mapped to one of the tints and shades defined in Spectrum. Constraining the interface to a set number of colors ensures a high level of consistency between products while providing flexibility and context for use of color. It also ensures accessible contrast when colors are used correctly.
Spectrum uses 11 shades of gray per color theme. These grays are neutral (not tinted), which means that they can work alongside any brand color and don’t draw a user’s attention away from the main focus on a color manipulation task or workflow.
Each color theme defines a gray color as the base background color (gray-100). The other 10 grays are then generated by targeting pre-defined contrast ratios from that base background, either lighter or darker. The dark and darkest themes are generated with higher contrast ratios than the light and lightest themes, ensuring that the contrast appears visually consistent.
Each gray color has a specific intent; for example, gray-700 and above can be used for text. Gray-50 and gray-75 are alternative backgrounds for creating hierarchy within components such as tables and popovers.
Semantic colors have assigned meanings and are used consistently throughout Spectrum to set expectations of meaning for users. Color is used sparingly and intentionally to reinforce hierarchies and to create clear modes of communication. Too much color can create cognitive overload, affecting users’ ability to efficiently interact with products.
Colors can be used in a variety of ways to communicate meaning to users. The semantic meanings in Spectrum include “informative,” “negative,” “notice,” and “positive.” Use semantic colors as a clear and predictable way to communicate meaning through a component’s appearance. When using color semantics in a way that is not purely decorative, text or an icon must also be displayed in order to be accessible. Color should never be used by itself for communication.
Color is also used to give users context within their workflow and to create hierarchy within the UI. Selected or keyboard-focused items are given visual importance as they relate to a user’s immediate actions.
Each color in the Spectrum system has a hue set, which adheres to accessibility standards without compromising the visual language. For blue, red, and green, the 400 color value (e.g., blue-400) is at least a 3:1 contrast ratio, which adheres to WCAG AA standards for text that is size 15 px bold or larger than 18 px. We also guarantee that the 500 color value for each of those three colors has at least a 4.5:1 contrast ratio, which adheres to WCAG AA standards for regular body text.
Similar to the grays, our colors are defined and generated by contrast ratio. The 300 value has the lowest contrast with the background and the 600 value has the highest contrast. Basing our color system on contrast allows us to transition between color stops without redefining how and where certain colors are applied.
We’re working towards having a single adaptive color theme. All existing themes are an output of the adaptive theme with preset brightness and contrast values. The method of generating Spectrum colors based on contrast ratio allows us to work towards implementing a color system that elevates inclusivity by giving users control over the brightness and contrast of a product.
Static colors are persistent across all themes. Other colors in our system need different values so that they can be used on theme-specific backgrounds. Static colors are used for backgrounds, and they are always paired with white text. In order to meet the minimum contrast ratio required by WCAG 2.0 AA standards, contrast is based on white text against the static color. Because of this, static colors retain the same color value across all themes.
Label colors have no semantic meaning attached to them. They can be used to show relationships between content types (e.g., categorization, labels in data visualizations).
Every part of the interface should use a color defined by Spectrum to ensure consistency across products. Spectrum’s colors are carefully chosen and tested to ensure they meet accessibility standards.
Spectrum’s colors are opaque and should not be replaced by using transparencies to achieve the same colors. There are few instances where it's acceptable to use transparency: for background overlays, drop shadows, and selection in tables.
In order to be accessible for every user, do not use color alone as a method of communication. For every usage of color as a feedback method, there should be an accompanying label and/or icon.
Gray-100 is the default background color for all themes. Use this for primary scaffolding of products such as toolbars, header bars, and panels. It’s also highly recommended as the default gray value for regions of your product.
Only use the alternative background colors of gray-75 or gray-50 for subsections, or for when you need to create additional hierarchy while already adhering to the defaults.
Do not use gray-75 or gray-50 for primary layout regions of your product; this will conflict with the usage of grays in Spectrum components and will also result in a loss of visual structure. Calls to attention, such as hero images or large content blocks in marketing sites, qualify for the usage of alternative backgrounds.
Date | Number | Notes |
---|---|---|
Sep 24, 2019 | 5.0.1 |
|
Apr 20, 2019 | 5.0.0 |
|