figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## AI color usage

Color, along with other indicators, serves as a visual reference to build transparency and accountability in AI experiences.

The AI library uses specific colors to visually distinguish AI-powered experiences. It maintains a tone that is distinct yet balanced to ensure AI functionality stands out without disrupting Dell Design System visual language.

AI gradient, AI global colors, and AI semantic colors are reserved exclusively for virtual assistant experience, micro-moments, and the AI floating-action-button that initiates the virtual assistant. These styles should not be used in non-AI experiences or standard UI elements.

## AI gradient

The AI gradient is a key visual identifier for AI-powered experiences. State gradients are created by applying the corresponding Blue 50, AI Purple 50, and AI Berry 50 color values for each state.

Use the gradient on designated AI elements, such as headlines, icons, buttons, and other AI-specific indicators. The gradient should not be applied to non-AI experiences.

Gradient variations are available for component states, including main (rest), hover, pressed, active, and inactive.

**For more details, please refer to [AI MM UI Kit](https://www.figma.com/design/NRs032a0QQWPGXlA12gall/AI-Micro-Moments-v3-Beta?node-id=145-29100&t=CXsxvDmPnCyZ8dM9-1) Figma file. The full color palette will be available here soon.**

<details data-name='color-collection' data-colors='[{"color":"Blue 50, #1282D6","useCase":"","opacity":1,"colorBorder":""},{"color":"AI Purple 50, #561FC4","useCase":"","opacity":1,"colorBorder":""},{"color":"AI Berry 50, #C61F68","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette' data-hideWidget='false'></details>

<details data-name='image-block' data-images='[{"alt":"Representation of AI gradient.","caption":"Representation of default AI gradient.","url":"https://dds.dell.com/site/v3/foundations/colors/ai-gradient-default.png"},{"alt":"AI gradient in different states: rest, hover, pressed, active, inactive.","caption":"AI gradient in different states: rest (default), hover, pressed, active, inactive.","url":"https://dds.dell.com/site/v3/foundations/colors/ai-gradient-states.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## AI global color palette

AI global colors define the foundational color palette for AI experiences. They represent raw color values without contextual meaning and serve as the foundation for color usage across AI experiences.

For more details, please refer to [AI MM UI Kit](https://www.figma.com/design/NRs032a0QQWPGXlA12gall/AI-Micro-Moments-v3-Beta?node-id=145-29100&t=CXsxvDmPnCyZ8dM9-1) Figma file. The full color palette will be available here soon.

## AI semantic

AI semantic colors provide contextual meaning within AI experiences. For guidance on semantic color definitions, usage, and best practices, see the semantic colors page.

For more details, please refer to [AI MM UI Kit](https://www.figma.com/design/NRs032a0QQWPGXlA12gall/AI-Micro-Moments-v3-Beta?node-id=145-29100&t=CXsxvDmPnCyZ8dM9-1) Figma file. The full color palette will be available here soon.

## Usage

Data visualization colors are derived from the design system’s light mode colors, and expanded to include a teal color scheme intended for use exclusively within the data visualization library. Teal color usage is contained in the categorical color palette provided below.

The following palettes, categorical and semantic, are optimized for accessibility and not meant to be used with other UI components or elements outside of the data visualization library.

## Categorical palette

Categorical colors help users distinguish nonnumerical data across categories that do not have an inherent correlation. These are provided in sequence to optimize contrast for accessibility and should not be reordered at implementation. The sequences provided are determined by the number of series or colors needed to uniquely display data within charts. These accommodate up to 4 series, 5 to 12 series, and 13 to 20 series.

<details data-name='color-collection' data-colors='[{"color":"Blue 900, #002A58","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 700, #A64600","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 500, #0EA0A9","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 800, #7F234F","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette' data-hideWidget='false'></details>

<details data-name='color-collection' data-colors='[{"color":"Blue 500, #1282D6","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 700, #A64600","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 500, #0EA0A9","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 700, #A8396F","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 900, #002A58","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 500, #C96100","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 900, #044E52","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 500, #CB548D","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 700, #0063B8","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 800, #7D2E00","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 700, #0B7C84","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 800, #7F234F","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette' data-hideWidget='false'></details>

<details data-name='color-collection' data-colors='[{"color":"Blue 500, #1282D6","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 700, #A64600","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 500, #0EA0A9","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 700, #A8396F","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 900, #002A58","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 600, #B85200","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 900, #044E52","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 600, #BA467D","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 800, #00468B","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 500, #C96100","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 800, #076469","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 500, #CB548D","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 700, #0063B8","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 800, #7D2E00","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 700, #0B7C84","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 900, #511230","useCase":"","opacity":1,"colorBorder":""},{"color":"Blue 600, #0672CB","useCase":"","opacity":1,"colorBorder":""},{"color":"Orange 900, #4F1A00","useCase":"","opacity":1,"colorBorder":""},{"color":"Teal 600, #0D8E97","useCase":"","opacity":1,"colorBorder":""},{"color":"Berry 800, #7F234F","useCase":"","opacity":1,"colorBorder":""}]' data-displaymode='horizontalColorPalette' data-hideWidget='false'></details>

Note that the 13 to 20-color sequence has some color conflicts, as many shades are used together. As such, this sequence should be used only in extreme cases when more than 12 series must be displayed on the same chart. It is not generally advised to represent so many lines within a chart, as it can introduce cognitive overload.

## Semantic palette

The semantic palette is used to communicate health status. Color is not a universal experience, and usage should not rely on color alone to convey meaning. Including an [icon](/foundations/icons/), label, or both can increase user understanding.

<details data-name='color-collection' data-colors='[{"color":"Green 500, #5D8C00","useCase":"1px inner stroke","opacity":1,"colorBorder":"Green 700, #436F00"},{"color":"Yellow 300, #E6AC28","useCase":"1px inner stroke","opacity":1,"colorBorder":"Yellow 500, #B36F00"},{"color":"Red 700, #BB2A33","useCase":"1px inner stroke","opacity":1,"colorBorder":"Red 800, #8C161F"}]' data-displaymode='horizontalColorPalette' data-hideWidget='false'></details>

## Resources

<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit Figma","path":"https://www.figma.com/file/a1X9m1vTZdG3N6xV5G9bz4/Data-Visualization?type=design&node-id=55%3A29491&t=p3daCXHfcuWM3qso-1","type":"External"},"title":"Figma","description":"View the data visualization colors in Figma.","icon":"figma"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>

Data visualization

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 constrast requirements

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 disabilities.

The main WCAG 2.2 [guidelines for contrast](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) requirements are featured below. Remember, these ratios are the minimum requirements. Having a higher ratio will mean even better inclusion and accessibility.

## Text contrast ratios

There are different contrast requirements for text depending on font-size and weight. All palette swatches include examples for meeting text and non-text contrast requirements.

| **Type** | **Size** | **AA Minimum Color Contrast Ratio** |
| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
| Larger text | 24-pixel font-size or greater, with regular font-weight 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 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 |

## 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](https://www.delldesignsystem.com/components/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, [non-text contrast requirements](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html) are only required for elements that relay meaning, such as icons or data visualizations.

| Type | Size | 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 | Non-logo graphics with essential meaning that contain 3px strokes and below | 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:

* 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.

## Articles

<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit website","path":"https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html","type":"External","ariaLabel":""},"title":"1.4.11 Non-text Contrast","description":"Review guidelines for non-text contrast on WCAG 2.2.","icon":"pop-up-arrow-corner"},{"image":{"url":"","alt":""},"link":{"label":"Visit website","path":"https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html","type":"External","ariaLabel":""},"title":"1.4.1 Use of color","description":"Review guidelines for use of color on WCAG 2.2.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>

Accessibility

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. 