foundations icon

Color: Light Mode

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.


Status

PublishedElement can be used in production
Documentation
PublishedElement can be used in production
PublishedElement can be used in production
Adobe XD
Adobe XD Kit
In backlogElement is in backlog

What's new

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.

Usage

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.

Primary palette

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.

ColorUse casesHex
Blue 600Primary interaction#0672CB
Blue 100#D9F5FD
Blue 200#94DCF7
Blue 300#5CC1EE
Blue 400#31A2E3
Blue 500#1282D6
Blue 600#0672CB
Blue 700#0063B8
Blue 800#00468B
Blue 900#002A58

Neutral palette

This palette features colors which can be used for subtle backgrounds, high-contrasting elements like text and dividers, and elevation and depth.

Gray 100#F5F6F7
Gray 200#F0F0F0
Gray 300#E1E1E1
Gray 400#D2D2D2
Gray 500#B6B6B6
Gray 600#7E7E7E
Gray 700#6E6E6E
Gray 800#636363
Gray 900#0E0E0E

Light neutrals

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.

ColorUse casesHex
WhiteBackground, surface, or offset content#FFFFFF
Gray 100Background, surface, or offset content#F5F6F7

Dark neutrals

The darker 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.

ColorUse casesHex
Gray 900Default text color#0E0E0E

Secondary palette

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 not 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

Yellow 100#FEEFCB
Yellow 200#F5CD6F
Yellow 300#E6AC28
Yellow 400#CE8D00
Yellow 500#B36F00
Yellow 600#A36100
Yellow 700#925400
Yellow 800#6D3A00
Yellow 900#442200
Red 100#FFECEE
Red 200#FFC3C9
Red 300#FF99A1
Red 400#FE6873
Red 500#E4424D
Red 600#D0353F
Red 700#BB2A33
Red 800#8C161F
Red 900#590A0F
Green 100#E9F5CE
Green 200#C0DD78
Green 300#9BC438
Green 400#7AA809
Green 500#5D8C00
Green 600#4F7D00
Green 700#436F00
Green 800#2C5000
Green 900#193100

Accent palette

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.

Light Blue 100#DAF5FD
Light Blue 200#97DCF4
Light Blue 300#61C1EB
Light Blue 400#36A2E0
Light Blue 500#1885C3
Light Blue 600#0D76B2
Light Blue 700#0468A1
Light Blue 800#004A77
Light Blue 900#002D4B
Purple 100#FBEBFF
Purple 200#ECC4FF
Purple 300#DB9EFF
Purple 400#C47AF4
Purple 500#A95ADC
Purple 600#994CCC
Purple 700#8A3FBA
Purple 800#66278F
Purple 900#40155C
Berry 100#FFEBF5
Berry 200#FFC0DF
Berry 300#F69AC6
Berry 400#E574AA
Berry 500#CB548D
Berry 600#BA467D
Berry 700#A8396F
Berry 800#7F234F
Berry 900#511230
Orange 100#FFEED2
Orange 200#FEC97A
Orange 300#F8A433
Orange 400#E67F01
Orange 500#C96100
Orange 600#B85200
Orange 700#A64600
Orange 800#7D2E00
Orange 900#4F1A00

Brand palette

The Dell Design System v2 palette was matched against Dell’s official brand palette. View the Dell Brand Colors

Accessibility

While color can add richness and meaning to an experience, there are two specific areas to consider when creating accessible experiences:

  • Making sure the contrast ratio between colors adequately meets accessibility standards.
  • Not relying on color alone to indicate meaning.

Color contrast ratio requirements: light mode

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.

Text contrast ratios

There are different contrast requirements for text depending on font-size and weight.

TypeSizeAA minimum color contrast ratio
Larger text24-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 greater3:1 against the background
Normal and small text23-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 greater4.5:1 against the background
Text linksFollow text size and weight guidance above4.5:1 contrast against the background (3.1 for large text); 3:1 contrast from surrounding body text

User interface and graphics contrast ratio requirements

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

TypeDefinitionAA minimum color contrast ratio
UI componentsAny interactive UI element or control with a visually distinguishable boundary3:1 against the background
Graphics with thicker strokes and/or fillsNon-logo graphics with essential meaning that contain 3px strokes and above3:1 against the background
Graphics with thin strokesNon-logo graphics with essential meaning that contain 3px strokes and below4.5:1 against the background
Visual focus indicatorAny custom styling applied to a component to indicate it is currently focused via keyboard input3: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:

  • Logo images that can’t be replaced by actual text
  • Disabled UI component states
  • Graphics with no text that are used purely to create a sensory effect

Communicating with color

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:

  • Use patterns and textures mixed with color to show contrast, instead of color alone.
  • Use symbols or icons along with colors to convey error messages.
  • Add text labels to accompany messages with color where appropriate.
  • Test color combinations with a color blindness simulator and be careful about using colors (such as reds and greens or blues and purples) that can’t be differentiated by people with certain types of color vision deficiencies.

WCAG 2.1: 1.4.1 Use of Color

Storybook demos

Vanilla color demo

View the color demo and code in Vanilla.

Web Components color demo

View the color demo and code for Web Components.

React color demo

View the color demo and code in React.

Resources

WebAIM Contrast Checker

Online contrast checker and accessibility resource.

Contrast Grid

Test foreground and background color combos for compliance.

Feedback