Color

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.

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

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

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

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