Color
The Priority Dispatch colors are as important to the brand as the logo itself. Visuals are noticed before text, and they should always be instantly identifiable. Additionally, Priority Dispatch’s color palette contains psychological subtext to further differentiate representative disciplines.
Primary Colors
We’ve created five core colors to represent the personality of Priority Dispatch. They provide a modern take on our diverse past, and work together to from the company’s visual brand.
Discipline Colors
Gray Scale
Primary Colors Scale
Color Relationships
Primary colors are used to direct the eye to important design elements and information. Use the blues and Gunmetal Gray strongly and purposefully to establish brand recognition; use Response Red to indicate action or to show a need for a response; use Dispatcher Gold and Uniform Gray sparingly in support of the primary colors.
Layering Model
Colors in the neutral gray palette are layered on top of each other to create depth and spatial associations. The layering model defines the logic of how colors stack on top of each other in a UI when using the Carbon themes. Aspects of the layering model are built directly into the themes, color tokens, and components.
The layering model differs between the light and dark themes.
Global Background Colors
The light background colors are based on White and Gray 100 colors, and the dark background colors use PDC Blue, Code Blue, and Gray 900, and Gray 800 background colors. Within each background color, the values for the universal color tokens use the primary background color as the base of its layering model.
Light Themes
There are two light themes for Priority Dispatch: Default white and Gray. For enabled UI colors light themes primarily use the color range of White to Gray 100, and for text and icons uses the color range between Gray 900 and Gray 600.
Dark Themes
There are two dark themes for Priority Dispatch: Gray 800 and Gray 900. For enabled UI colors, dark themes primarily use the color range of Gray 100 through Gray 50, and for text and icons uses the color range between White and Gray 200.
Interaction States
In addition to the core set of enabled-state tokens, there are five other interaction states defined with tokens for each theme. Interaction tokens are signified by the addition of a state name added to the end of the base token name. For example, the $background hover state token is $background-hover.
The color layering model for interaction tokens is as follows:
For values between Black and Gray 70, interaction gets lighter.
For values between Gray 60 and White, interaction gets darker.
Accessibility
Using various forms of contrast is the most important consideration when making user-friendly color and interface choices. Awareness of standards and best practices is the key to accessible color selections.
Web Content Accessibility Guidelines (WCAG) 2.1
Color contrast checker
Contrast Ratios
Contrast is the difference in brightness between any two elements. The Web Content Acessibility Guidelines (WCAG) set specific ratios that achieve the minimum required contrast for legibility. Generally speaking, small text is any size below 24px and requires a 4.5:1 contrast ratio. Large text is anything above 24px and requires a 3:1 contrast ratio. Graphical elements, such as data visualizations, also require a 3:1 contrast ratio.
The PDC palette is comprised of twelve color grades—Black, White and ten values for each hue. The following table indicates the minimum number of steps required to achieve commonly used contrast ratios between any two colors.
Color blindness
Don’t rely on color alone to convey meaning. This rule includes conveying information, indicating an action, prompting the user for a response or distinguishing one visual element from another. Those people affected by protanopia color blindness are less sensitive to red light, while sufferers of deuteranopia have the same problem with green. For example, people with protanopia will confuse blue and purple because they can’t recognize the red element of the color purple. The third type of color deficiency, tritanopia, is the least common and refers to sufferers who struggle to distinguish blue or yellow light. This image shows what the rainbow may look like to individuals with each of these forms of color blindness, compared to normal vision.
