Color
Color is used purposefully in a user interface to draw attention to something, or to show how components interact.
Principles
The color palette was created with the following principles in mind.
Flexible
Each color is provided in a range of variants to allow for design flexibility, as well as light and dark mode themes.
Accessible
Color combinations meet WCAG 2.2 AA standards to ensure legibility for color-blind and low vision users.
Purposeful
Color should not compromise communication. It should be used purposefully to support the content.
Hierarchical
Color should indicate which elements are interactive, as well as their level of prominence.
Color Library
Our color library helps ensure that the colors used in an interface are accessible, harmonious, and effective at communicating the intended message. They are also selected to match the Avaya branding guidelines.
Neo has 5 functional colors used to communicate meaning, such as errors, warnings, success, etc. Each color contains 9 variants to provide flexibility in design, support for light and dark modes, and sufficient contrast for accessibility (see below for more information). See Design Tokens for guidance on platform specific usage.
Neo also has a base grayscale consisting of 11 variants used to create a visual hierarchy throughout the interface - white, black and equivalent levels as functional colors. The grays are neutral to ensure they do not distract users from the main focus when completing tasks. They should be used across all other elements on the interface, including text, backgrounds, borders and sections.
How to Use
Each of the main color groups have specific uses cases. Select a color to see when to use that color in your UI designs.
Base Color
Text
For headers and regular body content.
Disabled States
Inactive components, such as buttons, input fields and sections.
Containers
Backgrounds and borders for sections such as navigation, headers and cards.
Red Color
Errors
Appear in messaging and status, such as banners and form fields.
Negative
Below zero values such as amounts, balances and scores.
Destructive
Alert for irreversible actions such as permanent deletion.
High Priority
Items that require immediate attention.
Missing & Overdue Items
Overdue tasks, missing required items, or missed interactions.
End Interactions
Finish interactions, such as leaving a call or meeting, and closing a session.
Orange Color
Warnings
Related to messaging and states, such as banners and form fields.
Pendings
Displaying interactions in a paused or waiting state.
Medium Priority
Items that require attention after high priority items.
Upcoming/Due Soon
Upcoming due dates for tasks, items, and interactions.
Blue Color
Information
Used for messaging and status, such as banners and form fields.
Interactive Items
Links, buttons, and interactive inputs such as checkboxes and radio buttons.
Hover States in Lists
Within dropdowns lists, tables and other list items.
Green Color
Success
Related to messaging and states, such as banners and form fields.
Positive
Above zero values, such as amounts, balances and scores.
Active States
Including ready, available, online and similar states.
Active Items
Completed or active tasks, items, or interactions.
Start Interactions
Begins an interaction, such as accepting a call or a meeting, or starting a session.
Purple Color
Supervisor and Observing Agents
Related to messaging and states for these users.
Data Colors
Data colors are a collection of color maps used in data visualization. The colors to use are defined by the data type.
Categorical
Data that does not have numeric meaning should be communicated with a categorical color scheme. This scheme contains individual hues designed to be visually distinct from one another, while also being color-blind safe.
Sequential
Data that has numeric meaning and progresses from low to high (i.e. sequentially) should be displayed with a sequential color scheme. This scheme employs a continuous range of colors from light to dark.
Diverging
Data that has numeric meaning and includes negative values, or ranges within 2 extremes, should be displayed with a diverging color scheme. This scheme contains 2 ranges of colors that meet in the center.
Accessibility
The improper use of color can create barriers for users with color blindness or low vision. Users that are color-blind struggle to differentiate between some colors, while those with low vision experience difficulties viewing an interface.
Color Blindness
Color blindness (also known as Color Vision Deficiency) affects approximately 1 in 12 men and 1 in 200 women. There are different forms of color blindness in which people have difficulty distinguishing certain colors, with extremely rare cases of those who cannot see color at all. The most common forms of color blindness are Deuteranomaly/Deuteranopia (green weak/blind), which affects 6% of men, and Protanomaly/Protanopia (red weak/blind), which affects another 2%. Tritanomaly/Tritanopia (blue weak/blind) is very rare, affecting less than 0.001% of men.
Low Vision
Low vision is often referred to as "partially sighted" and “sight impaired.” It is estimated that approximately 246 million people worldwide have some level of vision impairment. The level of impairment varies from person-to-person and can include: visual acuity (clarity/sharpness of vision), light sensitivity, contrast sensitivity, and field of vision (the area one can see when their eyes are focused in one place).
To help people with these issues, colors should be used as follows.
- Use color with other visual means of communication.
- Color alone should not be used to convey information as the content may not be apparent to those with color blindness or low vision. Color should be combined with other elements, such as labels or shapes. In addition to making it easily legible, it also makes items quicker to process for those with normal vision.
- Use sufficient contrast between elements. Navy blue text on a black background is hard for anyone to read.
- To ensure the interface is clearly legible for all users, use these rules when applying colors to text and UI elements. These apply to all colors at the same level (e.g. Red-100 is equivalent to Blue-100, Green-100, etc.). Note that decorative items (such as branding images) do not need to meet this requirement.