Status
PublishedElement can be used in production | |
Documentation | PublishedElement can be used in production |
PublishedElement can be used in production |
The use of color in an experience helps define communication, meaning, brand, and roles, making it easier for users to interact, search, and differentiate elements.
PublishedElement can be used in production | |
Documentation | PublishedElement can be used in production |
PublishedElement can be used in production |
The new design system color palette was created to meet Dell’s brand and accessibility standards. Colors now degrade to gray scale and comply with WCAG 2.1 contrast ratios.
This color palette was designed to accommodate Dell’s vast range of digital products. The use cases are recommendations.
Accessibility considerations for color are very important: make sure your colors meet accessibility guidelines. The two primary accessibility concerns are maintaining proper contrast ratios and making sure color is not used as the only method to define meaning in an experience. Review accessibility guidance below
The guidelines on this page outline the general use of color. For color guidance related to specific components, visit the component-specific guidelines.
The primary blue swatches reinforce Dell’s brand while unifying touchpoints and interactions. Blue 600 is the baseline UI color for most primary interactions. This palette also includes colors for hover, focus, select, and active states. For additional guidance, refer to the component-specific guidelines.
Color | Use cases | Hex |
---|---|---|
Primary interaction | #0672CB |
This palette features colors which can be used for subtle backgrounds, high-contrasting elements like text and dividers, and elevation and depth.
There are two light neutral colors that can be used for a Dell experience. Depending on the experience or product, either may be used as a background or to offset content or surfaces from the background color. For example, some products use Gray 100 as the page background and White as a container background, while others have done the opposite. Either is fine as long as you use a consistent color pattern. Whichever background color is used, make sure that all text, images, and components meet accessibility contrast ratio standards.
Color | Use cases | Hex |
---|---|---|
Background, surface, or offset content | #FFFFFF | |
Background, surface, or offset content | #F5F6F7 |
The dark neutrals can be used for text, dividers, or wherever more contrast is needed. Currently, Gray 900 (the default for text) is the only dark neutral color we have defined.
Please note that we eliminated Black (#000000) from the color palette because pure black text does not display well on high-resolution screens.
Color | Use cases | Hex |
---|---|---|
Default text color | #0E0E0E |
The design system’s secondary colors may evolve into a semantic palette, which will help users with wayfinding, identifying status, understanding actions, and locating help.
While this palette is further defined, it’s important that designs don’t rely completely on color to convey meaning. Instead, always use text and/or icons to help clarify the context for color blind users and for those who rely on assistive technology.
The list below includes universally recognized feedback colors and their meanings:
Blue: informative
Yellow: warning
Red: error
Green: success
Accent colors can be used to add a splash of color in branding experiences or for other components that need a variety of colors to differentiate experiences. The design system team is experimenting with this palette in our data visualization and categorical patterns.
The Dell Design System v2 palette was matched against Dell’s official brand palette. View the Dell Brand Colors
While color can add richness and meaning to an experience, there are two specific areas to consider when creating accessible experiences:
Color contrast is the difference between the brightness of the text or graphics and the brightness of the background color behind it. It’s expressed as a ratio ranging from 1:1 (white on white) to 21:1 (black on white).
A higher contrast ratio means that text or graphics will be easier to read for color blind users, those who read in bright- or low-light conditions, or for those with vision impairments.
The main WCAG 2.1 guidelines for contrast requirements are featured below. Remember, these ratios are the minimum requirements. Having a higher ratio will mean even better accessibility.
There are different contrast requirements for text depending on font-size and weight.
Type | Size | AA minimum color contrast ratio |
---|---|---|
Larger text | 24-pixel font-size or greater, with regular font-weights of at least 400; 18-pixel font size, bolded or with font-weight of 700 or greater | 3:1 against the background |
Normal and small text | 23-pixel font size or below, with regular font-weight of at least 400; 17-pixel font size or below, bolded or with a font-weight of 700 or greater | 4.5:1 against the background |
Text links | Follow text size and weight guidance above | 4.5:1 contrast against the background (3.1 for large text); 3:1 contrast from surrounding body text |
All UI (user interface) components require adequate contrast. A UI component is defined as anything “perceived as a control for a distinct function,” such as a button. The smaller or thinner an element appears, the higher contrast it will need. The higher contrast requirement will overrule a lower one, such as small text on a button, or a thin-stroked icon in a UI element.
For graphics, contrast is only required for elements that relay meaning, such as icons or data visualizations.
WCAG 2.1: 1.4.11 Non-text Contrast
Type | Definition | AA minimum color contrast ratio |
---|---|---|
UI components | Any interactive UI element or control with a visually distinguishable boundary | 3:1 against the background |
Graphics with thicker strokes and/or fills | Non-logo graphics with essential meaning that contain 3px strokes and above | 3:1 against the background |
Graphics with thin strokes | Non-logo graphics with essential meaning that contain 3px strokes and below | 4.5:1 against the background |
Visual focus indicator | Any custom styling applied to a component to indicate it is currently focused via keyboard input | 3:1 against the background |
Exceptions
Some graphical elements are exempt from WCAG’s current contrast requirements. If there’s any doubt that an element is exempt, proceed with the assumption that it does require contrast ratios be met.
Excluded elements:
Don’t use color as the only way of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Anyone who sees color differently, because they have color blindness, for example, may not be able to discern the function or meaning in your design. Adopt these techniques to design color-agnostic experiences that are accessible and usable for all:
WCAG 2.1: 1.4.1 Use of Color